Question

在将此标记为重复之前，我已阅读并考虑了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);

想法？

Answer 1

将handleChange函数更改为，

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

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

尽管进行了正确的变更处理，但是反应控制的表格输

1 个答案: