在 reactstrap 的 Select（输入）中设置值

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>

下拉列表：

所选值：

当我 select 它在输入中呈现的值但是当我想设置 selected 值时。

意思是，我想设置值，以便在我加载它时应该从 selected 值 start不是来自 1.

那么如何设置值呢？

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

Answer 1

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

因此，您可以从反应状态提供 value 和 handleChange 函数来更改 select 上的值。

如果你想 select “第一个选项”，即 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

在 reactstrap 的 Select（输入）中设置值

Set value in Select (Input) of reactstrap

reactjs

react-hooks

reactstrap