Reactjs 如何绑定select？

如何显示从“主选择”到“附加选择”的所选内容，以便在“主选择”中选择的内容在“附加选择”中自动选择

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[optionValue，setOptionValue]=useState（[1,2,3]）；
const onHandleOption=（）=>{
返回optionValue.map（（i，idx）=>{
返回{i}；
});
};
返回(
主要选择

{onHandleOption（）}
附加选择

{onHandleOption（）}
);
}

---

您可以为select元素设置一个值：

，这将使它更像一个受控组件

因此，在第一个select元素的onChange期间，您需要设置所选项目的状态，并确保它是第二个select元素的值

例：

const[selectedOption，setSelectedOption]=useState（someOption）；

它们需要有相同的

元素，以确保值从一个绑定到另一个

React表格文件供参考：

编辑：

下面是一个如何工作的示例：

  const options = [1, 2, 3];
  const [selectedOption, setSelectedOption] = useState(1);

  const onHandleOption = e => {
    setSelectedOption(e.target.value);
  };

  return (
    <div className="App">
      <p>Main select</p>
      <select onChange={onHandleOption}>
        {options.map(option => {
          return <option>{option}</option>;
        })}
      </select>

      <p>Attached select</p>
      <select value={selectedOption} readOnly>
        {options.map(option => {
          return <option>{option}</option>;
        })}
      </select>
    </div>
  );

const options=[1,2,3]；
const[selectedOption，setSelectedOption]=使用状态（1）；
const onHandleOption=e=>{
设置选择选项（如目标值）；
};
返回(
主要选择

{options.map（option=>{
返回{option}；
})}
附加选择

{options.map（option=>{
返回{option}；
})}
);

---

如上所示，第二个select元素有一个值，并声明为readOnly，因为我们不希望用户（一个受控组件）更改它。第一个select元素具有onChange处理程序，用于设置第二个select元素中要使用的共享状态对象。正如我所说，它们都需要相同的选项，因为从一个select元素到另一个select元素的值需要绑定。希望这能有所帮助。

在主选择中的选择中添加一个事件，每次选择某个内容时，将其推入数组，并且每次更改任何不起作用的内容时，都会打印此数组（上面的代码是为了演示。当然

元素需要

，它不是一个封闭的元素。请检查上面的编辑以了解对您有用的内容。

  const options = [1, 2, 3];
  const [selectedOption, setSelectedOption] = useState(1);

  const onHandleOption = e => {
    setSelectedOption(e.target.value);
  };

  return (
    <div className="App">
      <p>Main select</p>
      <select onChange={onHandleOption}>
        {options.map(option => {
          return <option>{option}</option>;
        })}
      </select>

      <p>Attached select</p>
      <select value={selectedOption} readOnly>
        {options.map(option => {
          return <option>{option}</option>;
        })}
      </select>
    </div>
  );