为什么我的React onChange事件处理程序无法触发?

时间:2019-01-29 18:46:20

标签: reactjs

对于为什么我的React事件处理程序似乎没有触发(console.log没有输出)感到困惑。我确实有CertTypeSelect的组件类。似乎处理程序应该触发。我需要在此处为​​SO的系统输入更多非代码,以允许我保存自己的修改,更多非代码,甚至更多非代码,更多非代码,更多非代码,甚至更多非代码,甚至更多非代码编写更多非代码甚至编写更多非代码。

class CertTypeSelect extends React.Component {

    constructor(props) {

        super(); // super(props);
        this.state = {

        }; // this.state

    } // constructor

    render() {

        const certTypeOptions = []; // 
        certTypeOptions.push(<CertSelectOption optionText="Select type"/>); // 
        storeData.forEach((storeDatum) => {
            certTypeOptions.push(
                <CertSelectOption optionText={storeDatum.catTitle}/>
            ); // push
        }); // forEach

        return (

            <div className="form-group third"><p><strong>Type</strong></p>
            <label className="select">
                <select name="govcapost-cert-type" id="govcapost-cert-type">{certTypeOptions}</select>
            </label></div>

        ); // return

    } // render

} // CertTypeSelect

    // top-most "app" component:
    class CertSelectionControls extends React.Component {

        constructor(props) {

            super(props); // 

            this.state = {

                type: 'Select type',
                level: 'Select level',
                replacement: false

            }; // this.state

            // all componenent methods must be bound during the constructor - 
            this.setType = this.setType.bind(this); //

            // log(this.state) // yes works

        } // constructor


        setType(event) {

            console.log('setType')
            // this.setState({type:event.target.value}); // setState

        } // setType

        render() {

            return (

                <span><div className="group"><CertTypeSelect value={this.state.type} onChange={this.setType} /></div><CertPricePreview /><CertContinueButton /></span>

            ); // return

        } // render
    } // CertSelectionControls

1 个答案:

答案 0 :(得分:3)

由于CertTypeSelect是自定义组件,而不是通用jsx标记,因此onChange将作为道具传递给CertTypeSelect

您将需要在CertTypeSelect内部调用此onChange函数。

onChange也是CertTypeSelect中元素的有效属性吗?否则,将没有事件参数传递给您的函数。