Question

简历：我有一个SignForm组件被父组件多次使用，我无法找到从input values传递SignForm的方法{1}}到父组件。

我已经搜索过它，发现了一些类似的问题，但根据我的情况，它不起作用：/

登录：调用SignForm的父组件

class Login extends React.Component {

    constructor() {
        //... code
    }

    render() {
        return (
            <SignForm
                cta='Go'
                switchSign='Create account'
                handleSubmit={this._handleSubmit}
            />
        )
    }

    _handleSubmit(username, password) {
        console.log(username, password);
         this._validateUser(username, password);
    }

    _validateUser(username, password) {
        //....
    }
}

SignForm ：包含表单标记的子组件

class SignForm extends React.Component {

    constructor() {
        super();
        var self = this;
    }

    render() {
        return (
            <form className="Form" onSubmit={this._onSubmit.bind(this)}>
                <div className="Form-body">
                    <p className="InputSide">
                        <input id="username" type="text" name="username" ref={(input) => this._username = input}/>
                        <label htmlFor="username">Username</label>
                    </p>

                    <p className="InputSide">
                        <input id="password" type="pass" name="password" ref={(input) => this._password = input}/>
                        <label htmlFor="password">Password</label>
                    </p>
                </div>

                <div className="Form-footer">
                    <button type="submit" name="sign" className="BtnBasic--lg">{this.props.cta}</button>
                    <Link to="/login" className="Link">{this.props.switchSign}</Link>
                </div>
            </form>

       )
    }

    _onSubmit(e) {
        e.preventDefault();
        console.log(this._username.value, this._password.value); //it logs the input values.
        self.props.handleSubmit(this._username.value, this._password.value); //error
    }
}

视图渲染没有问题，显示传递给SignForm的道具。问题出在表单提交上：最后一行self.props.handleSubmit(this._username.value, this._password.value);返回错误：

＆＃34;未捕获的TypeError：无法读取属性＆＃39; handleSubmit＆＃39;未定义的（...）＆＃34;

感谢。

更新：我找到了一个解决方案，请查看我的answer below

Answer 1

如果您的组件中除了constructor和组件的生命周期方法（render，componentWillMount，componentDidMount等等）之外还有其他功能，那么您就可以了将使用this关键字访问类方法或props或state，您需要bind this。您可以在构造函数中执行此操作。

constructor(props) {
   super(props);
   this._handleSubmit = this._handleSubmit.bind(this);
}

这样，您就不必在每个调用者上绑定它......

<form onSubmit={this._handleSubmit} />

Answer 2

好的，我找到了解决方案。这是一个this和.bind()缺失：

SignForm上的

1。我替换了此行中的self：

self.props.handleSubmit(this._username.value, this._password.value);

到this：

this.props.handleSubmit(this._username.value, this._password.value);

2。点击Login我添加到此行.bind(this)：

handleSubmit={this._handleSubmit}

为：

handleSubmit={this._handleSubmit.bind(this)}

结论：我需要更加谨慎地使用this和.bind()。我希望能帮助那些可能和我有同样问题的人。

React：在提交时从子组件获取Form值

2 个答案: