反应受控输入无法键入 [onChange]答案

【问题标题】：React Controlled Input Unable to Type [onChange]反应受控输入无法键入 [onChange]
【发布时间】：2017-12-01 07:56:36
【问题描述】：

对不起，如果这听起来像是一个重复的问题，我已经检查了现有的答案，但似乎没有一个能解决我的问题。

我最初设置一个受控输入的值，例如 value ={this.props.someValue}（来自 API）

稍后，我试图让用户在表单上键入值，

   class ProfilePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            lastname: "",
            errors : ""
        };
        this.handleOnchange = this.handleOnchange.bind(this);
    }
    handleInputChange = event => {
        const { target } = event;
        this.setState({
            [target.name]: target.value,
            errors: errors
        });
    };
    handleOnchange(event) {
        const { target } = event;
        this.setState({
            [target.name]: target.value
        });
    }

    render(){
    let firstName = [];
    let lastName = [];
    if (this.props.profile) {
        firstName = this.props.profile.first_name;
        lastName = this.props.profile.last_name;

    }
    return (
            <div class="container">

                        <label for="first-name">First Name</label>
                        <input
                            type="text"
                            placeholder="First Name"
                            name="name"
                            value={firstName.value}
                            onBlur={this.handleInputChange}
                            onChange={this.handleOnchange.bind(this)}
                            className={
                                errors && errors.name
                                    ? "inputError"
                                    : "inputValid"
                            }
                        />
                </div>
    )
      }

}

我的 onChange 事件成功触发，但它不允许我在输入框中输入任何内容。我错过了什么？

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案1】：

你value 的逻辑是错误的。每当this.state.name 更改时，您仍然会继续发送this.props.profile.first_name 作为值。

onChange 更新状态并在重新渲染时需要检查它是否有价值。

我的建议是在渲染方法上坚持使用state 值和“忽略”this.props.profile。

一种可能的解决方案是在构造函数中将其移交：

constructor(props) {
  super(props)

  this.state = {
    ...
    name: this.props.profile ? this.props.profile.first_name.value : ''
  }
}

【讨论】：

【解决方案2】：

每次运行 handleOnchange 函数时都会重新呈现表单，因为其中调用了 this.setState({...})。到目前为止这是正确的，但您必须手动更新输入 value。目前，您的输入字段在每次重新渲染时都会重新获取value firstname.value，这是this.props 之外的静态内容，这就是该值永远不会改变的原因。

您只需将输入value 设置为您在handleOnchange 函数中更新的状态变量，例如this.state.name。此外，您必须使用要在加载时显示的值（而不是像现在这样的空字符串）初始化构造函数中的状态变量。在您的示例中，这意味着：

constructor(props) {
    super(props);
    this.state = {
        name: props.profile.first_name.value,
        lastname: "",
        errors : ""
    };
    this.handleOnchange = this.handleOnchange.bind(this);
}

此外，您正在对handleOnchange 函数执行两次this 绑定，一次在构造函数中，一次在输入字段分配中。仅在构造函数中就足够了，因为它是这样做的首选方式。考虑到这一点，您可以在输入字段中分配函数，例如：onChange={this.handleOnchange}

【讨论】：