时间戳

首页 > 解决方案 > 如何绑定选择？

reactjs - 如何绑定选择？

问题描述

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

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [optionValue, setOptionValue] = useState([1, 2, 3]);

  const onHandleOption = () => {
    return optionValue.map((i, idx) => {
      return <option id={idx}>{i}</option>;
    });
  };

  return (
    <div className="App">
      <p>Main select</p>
      <select>{onHandleOption()}</select>

      <p>Attached select</p>
      <select>{onHandleOption()}</select>
    </div>
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： reactjs

解决方案

您可以为 select 元素设置一个值： <select value={selectValue} />，这将使它更像是一个受控组件。

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

前任：

const [selectedOption, setSelectedOption] = useState(someOption);

<select onChange={set option here} />
<select value={selectedOption} />

它们需要具有相同<option />的元素，以确保值从一个绑定到另一个。

React Forms 文档供参考：https ://reactjs.org/docs/forms.html

编辑：

这是一个如何工作的示例：

  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>
  );

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

推荐阅读