英文:
How do I keep and append placeholder text into the selected value in React Select?
问题
让我们假设我有一个带有占位符（'Selected Value: '）的React Select，并且我想保留占位符并将其附加到所选值中，使其看起来像（'Selected Value: 1'）。有没有办法做到这一点？
import Select from "react-select";
export default function App() {
const options = [
{ value: 1, label: "Selected Value: 1" },
{ value: 2, label: "Selected Value: 2" },
{ value: 3, label: "Selected Value: 3" },
{ value: 4, label: "Selected Value: 4" }
];
const placeholder = "Selected Value: ";
return (
<div className="App">
<Select options={options} placeholder={placeholder} />
</div>
);
}
codesandbox链接：https://codesandbox.io/s/brave-chatterjee-pjol2d?file=/src/App.js:23-385
编辑：抱歉，忘记提到，我不希望占位符直接出现在选项的标签中。
英文:
Let's say I have a React Select with a placeholder ('Selected Value: '), and I want to keep the placeholder and append it into the selected value so that it looks something like ('Selected Value: 1'). Is there any way to do it?
import Select from "react-select";
export default function App() {
const options = [
{ value: 1, label: 1 },
{ value: 2, label: 2 },
{ value: 3, label: 3 },
{ value: 4, label: 4 }
];
const placeholder = "Selected Value: ";
return (
<div className="App">
<Select options={options} placeholder={placeholder} />
</div>
);
}
codesandbox: https://codesandbox.io/s/brave-chatterjee-pjol2d?file=/src/App.js:23-385
EDIT: Sorry, forget to mention, I do not want the placeholder to directly be in the labels of the options
答案1
得分: 2
你可以接受我的答案
import Select from "react-select";
import { useState } from "react";
export default function App() {
const [selectBoxValue, setSelectBoxValue] = useState('')
const options = [
{ value: 1, label: 1 },
{ value: 2, label: 2 },
{ value: 3, label: 3 },
{ value: 4, label: 4 }
];
const placeholder = `已选择的值：${selectBoxValue}`;
return (
<div className="App">
<Select
options={options}
placeholder={placeholder}
value={placeholder}
onChange={(event) => setSelectBoxValue(event.value)} />
</div>
);
}
英文:
you can accept my answer
import Select from "react-select";
import { useState } from "react";
export default function App() {
const [selectBoxValue, setSelectBoxValue] = useState('')
const options = [
{ value: 1, label: 1 },
{ value: 2, label: 2 },
{ value: 3, label: 3 },
{ value: 4, label: 4 }
];
const placeholder = `Selected Value: ${selectBoxValue}`;
return (
<div className="App">
<Select
options={options}
placeholder={placeholder}
value={placeholder}
onChange={(event) => setSelectBoxValue(event.value)} />
</div>
);
}
答案2
得分: 1
只使用这些选项：
const options = [
{ value: 1, label: '选定的值：1' },
{ value: 2, label: '选定的值：2' },
{ value: 3, label: '选定的值：3' },
{ value: 4, label: '选定的值：4' }
];
英文:
just use these options:
const options = [
{ value: 1, label: 'Selected Value: 1' },
{ value: 2, label: 'Selected Value: 2' },
{ value: 3, label: 'Selected Value: 3' },
{ value: 4, label: 'Selected Value: 4' }
];
答案3
得分: 1
请参阅 https://mui.com/material-ui/react-select/
<Select
value={personName}
onChange={handleChange}
renderValue={(selected) => {
if (selected.length === 0) {
return <em>占位符</em>;
}
return '占位符 ' + selected;
}}
>
可能有两种解决方案：
- 您可以使用 renderValue 来渲染您想要的内容。
- 您可以使用状态并将值传递为 value 属性。在 handleChange 中，您可以更改值的状态。应该可以正常工作。
英文:
Read https://mui.com/material-ui/react-select/
<Select
value={personName}
onChange={handleChange}
renderValue={(selected) => {
if (selected.length === 0) {
return <em>Placeholder</em>;
}
return 'placeholder '+selected;
}}
>
Possible two solutions:
- You can use renderValue to render what you want.
- You can use state and pass the value as value props. On handleChange you can change the state of value.
it should work.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论