javascript - onChange 不会在 React 组件中触发

Question

我有以下组件，我在其中渲染内联无序元素的列表，每次选择发生变化时我都会尝试更新存储中的值

class EditMode extends Component {

  changeComps = (e) => {
    console.log(e.target.value);

  };

  render() {

    let compOptions = this.props.compOptions.map((val, idx) => {
        return (
            <li key={idx} data-key={idx} style={{backgroundColor: this.props.compCheckedVal === idx ? '#30C1C6' : 'white'}}>
                <input type="radio" value={val}  />
                <label htmlFor="">{val === 'No Coverage' ? val.toUpperCase() : val}</label>
            </li>
        )
    });

    return (
        <div className='editDetails'>
            <div className="row">
                <div className="col">
                    {this.props.compDeductTitle}
                </div>
            </div>
            <div className="row">
                <div className="col">
                    <ul onChange={this.changeComps}>
                        {compOptions}
                    </ul>
                </div>
            </div>
            ..........
          </div>)
   }

目前我不确定为什么 onChange 事件处理程序没有触发。我什至没有看到该事件在控制台中打印出来。我在这里做错了什么吗？

Answer 1

onChange 事件不适用于 ul 元素。

请查看more details .

如果你想附加onChange事件，compOptions可以这样写。

let compOptions = this.props.compOptions.map((val, idx) => {
    return (
        <li key={idx} data-key={idx} style={{backgroundColor: this.props.compCheckedVal === idx ? '#30C1C6' : 'white'}}>
            <input type="radio" value={val} onChange={this.changeComps}  /> //attach onChange here directly
            <label htmlFor="">{val === 'No Coverage' ? val.toUpperCase() : val}</label>
        </li>
    )
});