如何使用react-js以动态形式将复选框值与文本输入绑定？

Posted 2021-05-03

我在react-js中有一个动态表单，我的一些元素是复选框/无线电，其中一个有一个文本输入绑定到它。 例如问题是：你最喜欢的颜色是什么？

答案是：

 - red
 - blue
 - green
 - OTHER

和其他答案在其前面有一个文本输入，供用户在其中键入自定义答案。如何将该复选框/单选按钮绑定到相关的输入文本并获取其值？ form

答案

如果您使用较新版本的React，请尝试使用状态挂钩。有点像

import React, { useState } from 'react';

function Example() {
  const [color, setColor] = useState('');

  return (
    <div>
    <select value={color} 
          onChange={(e) => setColor(value)}>
      { ['red', 'blue', 'green', 'OTHER'].map((c) => <option key={c} value={c}>{c}</option>)}
    </select>
    {color === 'OTHER' && <input type="text"></input>}
    </div>
  );
}

https://reactjs.org/docs/hooks-state.html