Reactjs 嵌套的动态子组件中的自定义方法不触发

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

{this.state.customInputs.map（（输入，i）=>{
如果（input.type==='radio'）{
返回(
{input.name}
this.handleRadioClick（）}
选项={input.options}/>
)
}else if（input.type==='checkbox'）{
返回(
{input.name}
this.handleCheckboxClick（）}
选项={input.options}/>
)
}
})
}

子组件包括：

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扩展组件{
handleCheckboxOnClick=（e）=>{
e、 预防默认值（）；
让checkboxState=e.target.value；
console.log（checkboxState）；
返回此.props.handleCheckboxClick（checkboxState）；
}
render（）{
返回(
{this.props.options.map（（项目，i）=>{
返回(
this.handleCheckboxOnClick（）}/>
{item}
);
})}
)
}

}

导出默认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扩展组件{
handleRadioOnClick=（e）=>{
e、 预防默认值（）；
让radioState=e.target.value；
让radioName=e.target.name；
控制台日志（radioState）；
返回此.props.handleRadioClick（radioState，radioName）；
}
render（）{
返回(
{this.props.options.map（（项目，i）=>{
返回(
this.handleRadioOnClick（）}/>
{item}
)
})}
)
}

}

---

导出默认输入

收音机是否正常，但复选框是否正常？看起来您正在将一个名为

handleOnClick

的道具传递给您的复选框组件，但需要一个

handleCheckboxClick

道具。

编辑复选框组件中的方法道具调用后，我能够通过对每个子项的onClick方法进行以下调整来传递事件：

onClick={（e）=>this.handleCheckboxOnClick（e）}

正如@larz所建议的，我还删除了父级中的函数return，并仅在那里通过引用传递方法

我的其他问题是CSS，因为

有一个CSS规则

可见性：隐藏
，而
元素处理与onClick的CSS视觉交互。为了解决这个问题，我将onClick方法移动到
，并为子本地onClick方法中的属性定义添加了一个本地JS方法，如下所示：
let radioState=e.target.childNodes[0]。值
谢谢，是的，我看到了。现在，该复选框与修复一起工作：
onClick={（e）=>this.handleCheckboxOnClick（e）}
我在其中传递事件。它开始看起来更像是一个CSS问题，至少现在有了复选框。我以前有一个更简单的布局，但是被要求做一点未来的证明，以防他们通过API生成新元素，从那时起，复选框是不可访问的，除非我将输入CSS从
visibility:hidden
更改为仍然使用它。再次感谢您的投入。如果我首先弄清楚，就会发布此CSS问题，我可以通过将
onClick
移动到
并更改本地
handlecheckboxonclick（）
来在复选框组件中修复此问题，这样保存参数：
让checkboxState=e.target.childNodes[0]。值相同的修复程序适用于收音机。
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>
    )
}