React Forms 数据存在于两个组件中

Question

我有两个组件 App，Entry2。在 App 中，我正在调用 Entry2，它基本上是一个 form.Now 我想将所选选项恢复为 App.How 我可以这样做吗？ App.jsx

<Entry2 
      question="What is the color of apple?"
      op1="red"
      op2="green"
      op3="blue"
      op4="yellow"
/>

Entry2.jsx

function Entry2(props) {
  return (
    <div className="term">
      <div>
        <p>{props.question}</p>
            <div>
            <input type="checkbox" id="op1" name="ans" value="{props.op1}" />
            <label>{props.op1}</label>
            <input type="checkbox" id="op2" name="ans" value="{props.op2}" />
            <label>{props.op2}</label>
            <input type="checkbox" id="op3" name="ans" value="{props.op3}" />
            <label>{props.op3}</label>
            <input type="checkbox" id="op4" name="ans" value="{props.op4}" />
            <label>{props.op4}</label>
            <input type="submit"/>
          </div>
      </div>
    </div>
  );
}

Answer 1

有几种方法可以将数据返回给父组件。

第一种方法是让父组件管理表单状态并监听变化事件，以便更新状态。

在第二种方法中，您将状态保留在 Entry2 组件本身内，并且仅在提交时“通知”父组件。例如，如果组件是完整形式，这将很有用。

我还建议您使选项更加动态。我还猜测应该只有 1 个选项 selected 所以你可能想使用 select 输入。

代替 op1..op4 道具，将其更改为单个 options 道具，如下所示：

<Entry2 
  question="What is the color of apple?"
  options={['red', 'green', 'blue', 'yellow']}
/>

如果需要添加更多颜色，您只需在选项数组中添加一种即可。

当您选择第二种方法时，您将必须进行以下更改：

const {useState} = React;

function Entry2(props) {
  // use an empty string or the default selected option `props.options[0]`
  const [value, setValue] = useState(''); 

  return (
    <div className="term">
      <div>
        <p>{props.question}</p>
        <form onSubmit={event => props.onSubmit(event, value)}>
          <select onChange={event => setValue(event.target.value)}>
            {props.options.map(option => <option key={option} value={option}>{option}</option>)}
          </select>
          <input type="submit" />
        </form>
      </div>
    </div>
  );
}

function App() {
  const [submittedValue, setSubmittedValue] = useState();
  
  return (
    <div>
      <Entry2
        question="What is the color of the apple?"
        options={['red', 'green', 'blue', 'yellow']}
        onSubmit={(event, value) => {
          event.preventDefault();
          setSubmittedValue(value);
        }}
      />
      <p>Submitted: {submittedValue}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

React Forms 数据存在于两个组件中

React Forms data is present in two components

forms

reactjs

react-props