reactjs - 嵌套的动态子组件中的自定义方法不会触发 React

问题描述

我的应用程序中有一个组件，它处理来自 API 的数据，并使用它根据 API 调用中的参数值之一动态创建子项（在他们自己的组件中定义）。我能够获取数据以呈现组件，但 onClick 方法不起作用。这是一些代码：父组件（在返回中）：

  {this.state.customInputs.map((input, i) => {
                if(input.type === 'radio'){
                    return(
                        <div className="preference-section" key={i}>
                            <h2>{input.name}</h2>
                                <RadioCustomInput 
                                    radioActiveState={this.state.radioActiveState} 
                                    handleRadioClick={() => this.handleRadioClick()} 
                                    options={input.options} />
                        </div>
                    )
                } else if ( input.type === 'checkbox'){
                    return(
                        <div className="preference-section" key={i}>
                            <h2>{input.name}</h2>
                                <CheckboxCustomInput 
                                    selectedBoxes={this.state.selectedCheckboxes} 
                                    handleOnClick={() => this.handleCheckboxClick()} 
                                    options={input.options} />
                        </div>
                    )
                }


                })
            }

子组件：

class CheckboxCustomInput extends Component {

handleCheckboxOnClick = (e) => {
    e.preventDefault();
    let checkboxState = e.target.value;
    console.log(checkboxState);
    return this.props.handleCheckboxClick(checkboxState);
}
render(){
    return(
        <div className="preference-options">
            {this.props.options.map((item, i) => {
                return(
                <div key={i} className="checkbox-group">
                    <label 
                        className={this.props.selectedBoxes.includes(item) ? "active-box checkbox-label" : "checkbox-label"} 
                        htmlFor={item}>
                        <input 
                            className="checkbox-input" 
                            type="checkbox" 
                            value={item}
                            id={item + '_checkbox'}
                            onClick={() => this.handleCheckboxOnClick()} />
                        {item}
                    </label>
            </div>
                );
            })}
        </div>
)
}

}

导出默认 CheckboxCustomInput；

和另一个：

class RadioCustomInput extends Component{

 handleRadioOnClick = (e) => {
    e.preventDefault();
    let radioState = e.target.value;
    let radioName = e.target.name;
    console.log(radioState);
    return this.props.handleRadioClick(radioState, radioName);
}

render(){
    return(
        <div className="radio-group">
            {this.props.options.map((item, i) => {
                return(
                    <label 
                        className={this.props.radioActiveState === item ? "active-box radio-label" : "radio-label"} 
                        htmlFor={item + '-card'} key={i}>
                        <input 
                            className="radio-input" 
                            type="radio"
                            name={item} 
                            value={item} 
                            id={item + '_radio'}
                            onClick={() => this.handleRadioOnClick()} />
                        {item}
                    </label>
                )
            })}

        </div>
    )
}

}

导出默认 RadioCustomInput；

标签： reactjs

reactjs - 嵌套的动态子组件中的自定义方法不会触发 React

问题描述

解决方案

推荐阅读