reactjs - 参考选择和选项如何使用

Question

需要做什么才能在选择选项时将其存储在 ref 中？

<select className={style.formInput} ref={selectRef}>
                    {category.map((item) => <option value={item.name}
                                                    key={Math.random().toString()}>{item.name}</option>)}
</select>

标签： reactjs

Answer 1

你可以试试这样的

  export default function App() {
  const [state, setState] = React.useState({ category: "" });

  const formValue = (event) => {
    setState({ ...state, [event.target.name]: event.target.value.trim() });
  };

  const category = React.useRef(null);

  console.log("state", state);

  // On first render
  console.log("Category Ref", category.current && category.current.value);

  return (
    <div>
      <label>Categories</label>
      <select
        ref={category}
        onChange={formValue}
        name="category"
        value={state.category}
      >
        <option>Select a choice</option>
        <option value="First Choice">First Choice</option>
        <option value="Second Choice">Second Choice</option>
        <option value="Third Choice">Third Choice</option>
        <option value="Fourth Choice">Fourth Choice</option>
      </select>
    </div>
  );
}

这样，您可以将其置于状态并在 ref 上访问它。