将反应功能作为道具传递

时间:2021-05-04 13:48:26

标签: javascript reactjs

我一直在查看其他帖子,但没有发现我的代码有什么问题。它应该将一个函数作为道具传递给组件,但是我很难访问它,因为当我得到它无法读取未定义道具的响应时。我做错了什么?

道具:

<SettingsSection    forceUpdateHandler = {this.props.forceUpdateHandler}
                                        languages = {this.props.languages}
                                        setLanguage = {this.props.setLanguage}
                                        getLanguage = {this.props.getLanguage}
                                        getParameters = {this.props.getParameters}/>

组件:

class SettingsSection extends Component{

    constructor(props){
        super(props)
        this.state = {
            value: "java"
        }
    }

    // Send change in component upwards.
    handleChange(event) {
        this.props.setLanguage(event.target.value);
    }

    // Render component.
    render() {
        return (
            <div>
                {/*settings section will be changed later*/}
                <h5 style={{paddingTop:"20px"}}>Settings</h5>

                {/* Language drop down menu */}
                <h6 style={{paddingTop:"15px"}}>Export Language</h6>
                <select style={{paddingTop:"5px"}} onChange={this.handleChange} value={this.state.value}>
                    {this.props.languages.map(language => { return ( <option value={language}> {language} </option>)})}
                </select>
            </div>
        );
    }
}

1 个答案:

答案 0 :(得分:1)

this 在您的函数中未定义。由于 undefined 没有任何道具,因此您无法访问其中的 .props

您需要将其绑定到构造函数中的组件,如下所示:

constructor(props){
        super(props)
        this.state = {
            value: "java"
        }
        this.handleChange = this.handleChange.bind(this);
    };