在 reactstrap 的 Select (Input) 中设置值

Question

代码：

const [frequency, setFrequency] = useState({});

function handleSelect(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    setFrequency({
        ...frequency,
        [name]: value
    })
} 

<FormGroup>
    <Label for="exampleSelect">Select</Label>
    <Input type="select" name="select" id="exampleSelect" onChange= {handleSelect} >
    // I tried the below, But it does not seem to work
    <Input type="select" name="frequency" id="frequency" value={frequency.frequency}>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Input>
  </FormGroup>

下拉菜单：

所选值：

当我选择它在输入中呈现的值但当我想设置所选值时。

意思是，我想设置这个值，这样当我加载它时，它应该从选定的值开始，而不是从1。

那么我该如何设置值呢？

我可以通过调用一些选择函数来setState。但是在输入标签中我只想要一个值，所以当我刷新下拉列表时应该显示xyx...1,2,3,4。

Answer 1

如果你写value="xyx"，无论你选择什么选项，select 的值总是xyz。

因此，您可以提供来自反应状态的value 和handleChange 函数来更改选择值。

如果你想在开始时选择“第一个选项”，即xyz，你可以用xyz初始化状态：

export default function App() {
  const [frequency, setFrequency] = useState({ frequency: "xyz" });

  function handleSelect(e) {
    setFrequency((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }))
  }

  return (
    <>
      {JSON.stringify(frequency)}
      <FormGroup>
        <Label for="exampleSelect">Select</Label>
        <Input
          type="select"
          name="frequency"
          id="frequency"
          value={frequency.frequency}
          onChange={handleSelect}
        >
          <option>xyz</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </Input>
      </FormGroup>
    </>
  );
}

这是demo