如何使输入字段可编辑在reactjs中具有值？

Question

我是Reactjs的新手，我很难使输入字段具有赋值。 请大家帮帮我

我的js文件。

       <div className="col-sm-9">
        <input className={this.state.editable ? "edit-profile" : "disable-profile disable"}
        ref="fullName"
        onChange={this._handleInputChange.bind(null, "fullName")}
                        value={user.fullName}/>

我的按钮

<button className="btn btn-default" onClick={this.edit}>
    {this.state.editDone ? "Done" : "Edit Profile"}</button>

edit = () => {
    if (!this.state.editDone) {
        this.setState({ editable: true, editDone: true});
    } else {
        this.setState({ editable: false, editDone: false});
    }
}

css文件

.edit-profile {
outline: 0;
color: #000000;
border-width: 0 0 1px 0;
border-color: #A9A9A9;
width: 30%;
background-color: transparent;
padding-left: 20px;
font-size: 12px;
margin-bottom: 20px;}

我想做什么？

Answer 1

如果使用ref处理值，则使用defaultValue而不是value 。

defaultValue prop on input允许您的非受控组件设置初始值。

value需要您在每个渲染上设置值。

所以只需改为：

<input className={this.state.editable ? "edit-profile" : "disable-profile disable"}
        ref="fullName"
        onChange={this._handleInputChange.bind(null, "fullName")}
        defaultValue={user.fullName}/>