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

【问题标题】：custom method in nested, dynamic child component doesnt fire React嵌套的动态子组件中的自定义方法不会触发 React
【发布时间】：2019-02-23 19:37:24
【问题描述】：

我的应用程序中有一个组件，它处理来自 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

【解决方案1】：

收音机是否工作但复选框不工作？看起来您正在将一个名为 handleOnClick 的道具传递给您的复选框组件，但需要一个 handleCheckboxClick 道具。

【讨论】：

谢谢，是的，我看到了。现在复选框和修复一起工作：onClick={(e) => this.handleCheckboxOnClick(e)} 我将事件传递到这里。它开始看起来更像是一个 CSS 问题，至少现在是复选框。我之前有一个更简单的布局，但被要求做一个未来的证明，以防他们通过 API 创建新元素，从那时起，除非我从 visibility:hidden 更改输入 CSS，否则复选框无法访问所以仍然使用它.再次感谢您的输入。如果我先弄清楚会发布
这个 CSS 问题我可以在复选框组件中修复，方法是将 onClick 移动到 <label/> 并更改本地 handleChecboxOnClick() 以保存参数，如下所示：let checkboxState = e.target.childNodes[0].value; 同样修复与收音机一起使用。

【解决方案2】：

在 Checkbox 组件中编辑方法 prop 调用后，我能够通过使用以下调整将事件传递给每个孩子的 onClick 方法：onClick={(e) => this.handleCheckboxOnClick(e)}

按照@larz 的建议，我还删除了父级中的函数 return 并仅通过引用传递 dthe 方法。

我剩下的问题是 CSS，因为 <input/> 的 css 规则为 visibility:hidden，而 <label/> 元素正在处理与 onClick 的 CSS 视觉交互。为了解决这个问题，我将 onClick 方法移动到 <label/> 并在子本地 onClick 方法中的属性定义链中添加了一个原生 JS 方法，如下所示： let radioState = e.target.childNodes[0].value;

【讨论】：