尽管更改处理正确，但反应控制的表单输入不会改变答案

【问题标题】：React controlled form input not changing despite correct change handling尽管更改处理正确，但反应控制的表单输入不会改变
【发布时间】：2018-06-17 22:05:59
【问题描述】：

在将此标记为重复之前，我已阅读并考虑了Can't type in React input text field 和其他类似问题。我也读过the React docs on this subject。

我遇到的问题是我相信我已经正确地将本地状态初始化为道具，并绑定了更改处理程序，但我仍然无法在输入字段中输入。

class MyComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            userData: {
                firstName: props.userData.firstName
            }
        };

        this.handleChange = this.handleChange.bind(this);
    }

    render() {
        return (
            <div>
                <button onClick={this.onClick}>Edit</button>
                <div>
                    <form onSubmit={this.handleFormSubmit}>
                        <input
                            className="form-item"
                            placeholder="Enter First Name"
                            value={this.state.userData.firstName}
                            name="firstName"
                            type="text"
                            onChange={this.handleChange}
                        />
                    </form>
                </div>
            </div>
         );
      }

    handleChange(e) {
        this.setState({
            value: e.target.value
        });
    }
}

如果重要的话，我的道具来自 Redux 商店：

function mapStateToProps(state) {
    return {
        userData: state.userData
    };
}

export default connect(mapStateToProps)(MyComponent);

想法？

【问题讨论】：

标签： forms reactjs redux

【解决方案1】：

将您的 handleChange 函数更改为，

handleChange(e) {
  let userData = this.state.userData;
  userData.firstName = e.target.value;
        this.setState({
            userData :userData 
        });
    }

您正在从不同的对象设置值和读取值

【讨论】：