Question

所以我有一个选择，每当我选择某项时，它都会更改状态值。这完美地工作了，但是由于选择代码确实很大，并且每页最多有6个选择，因此我想将其移动到另一个组件。

这是1个组件中的样子：

const [root1Select, setRoot1Select] = useState([[], []]);    
const root1Change = e => { setRoot1Select(e.target.value.split(',')); }
return(
  <div>
    <select id="root1" onChange={root1Change}>
    ...

这也是我想要的样子：

应用组件：

const [root1Select, setRoot1Select] = useState([[], []]);    
const root1Change = e => { setRoot1Select(e.target.value.split(',')); }
<SelectRoot />

SelectRoot组件：

return(
  <div>
    <select id="root1" onChange={root1Change}> //thats root1 from App Component
    ...

Answer 1

您可以遵循代码，该代码实际上可以有效地将传递给父母的道具传递给孩子，并且孩子可以更改为调用父母道具或跟随链接：

How to update parent's state in React?

应用

const [root1Select, setRoot1Select] = useState([[], []]);    
const root1Change = e => { setRoot1Select(e.target.value.split(',')); }
<SelectRoot onChangeSelect={(e)=>root1Change(e)} />

SelectRoot组件：

function SelectRoot(props) {
   return <select id="root1" onChange={props.onChangeSelect}> .....
}

Answer 2

也许这与您要尝试的操作更加一致。请记住，由于useRef的工作方式，选择设置不会触发重新渲染。

const Select = props => {
  return (
    <select
      id={props.id}
      onChange={e => {
        props.current[e.target.id] = e.target.value;
        console.log(props.current);
      }}
    >
      <option value="1">1</option>

      <option value="2">2</option>

      <option value="3">3</option>
    </select>
  );
};

const Root = () => {
  const selRef = useRef({});
  return (
    <div>
      <Select id="sel1" current={selRef.current} />
      <Select id="sel2" current={selRef.current} />
      <Select id="sel3" current={selRef.current} />
    </div>
  );
};```

通过调用函数从另一个组件更改组件中的值

2 个答案: