Question

我试图在＆lt; select＆gt;中处理动态生成的＆lt;选项＆gt;的选择。元件。我知道onChange触发器是我需要设置的状态，但我似乎无法让她工作。这是我发生的事情：请参阅CodePen上的Archibald Hammer（@archaeopteryx）的Pen动态选择。导入反应来自＆＃39;反应＆＃39; 从＆＃39; react-dom＆＃39;导入ReactDOM import _ from＆＃39; lodash＆＃39; const ITEMS = [ {name：＆＃39; centos＆＃39;，text：＆＃39; centos＆＃39;，value：＆＃39; centosValue＆＃39; }， {name：＆＃39; ubuntu＆＃39;，text：＆＃39; ubuntu＆＃39;，value：＆＃39; ubuntuValue＆＃39; }， ] const SelectComponent =（props）=＆gt; （＆lt; select name = {props.name}＆gt; {_. map（props.items，（item，i）=＆gt;＆lt;选项键= {I} 名称= {item.name} 值= {item.value} 文本= {item.text} handleSelect = {props.handleSelect} /＆GT; ）} ＆LT; /选择＆GT; ） const Option =（props）=＆gt; （＆LT;选项值= {props.value} 的onChange = {props.handleSelect}＆GT; {props.text}＆LT; /选项＆GT; ） class App扩展了React.Component { constructor（）{ 超（） this.state = { 选中：＆＃39;＆＃39; } this.handleSelect = this.handleSelect.bind（this） } handleSelect（e）{ this.setState（{selected：e.target.value}） } render（）{ 回来（＆LT; DIV＆GT; ＆LT; SelectComponent 命名=＆＃34; testSelect＆＃34; 项= {} ITEMS handleSelect = {this.handleSelect} /＆GT; ＆LT; DIV＆GT; ＆lt; p＆gt;已选择：{this.state.selected}＆lt; / p＆gt; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ） } } ReactDOM.render（＆lt; App /＆gt;，document.getElementById（＆＃39; app＆＃39;））此代码确实按预期呈现下拉选择器，但它不会触发所选项上的setState。有什么想法吗？此外，有没有人有任何专业技巧来解决这类问题？您知道的任何超级光滑的开发工具或找出哪些道具正在通过的方法等？

Answer 1

问题是select元素中的选项不会触发任何事件，更改发生在select元素而非选项中。您所要做的就是将handleSelect方法传递给<select>组件：

const SelectComponent = (props) => (
  <select name={props.name}
    onChange={props.handleSelect}
  >
    {_.map(props.items, (item, i) => <Option
      key={i}
      name={item.name}
      value={item.value}
      text={item.text}
      handleSelect={props.handleSelect}
      />
    )}
  </select>
);

const Option = (props) => (
  <option 
    value={props.value} 
  >{props.text}</option>
)

抱歉，我忘了添加实时示例链接： https://codesandbox.io/s/31AyQ2woR

就调试提示而言，在这种特殊情况下，只知道事件是由select组件而不是option元素触发的;）。但我一直使用的是React开发人员工具：

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

https://addons.mozilla.org/es/firefox/addon/react-devtools/

React：动态生成的<select>元素 - 设置＆＃39; selected＆＃39;映射元素中的状态

1 个答案: