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上{p} input道具允许不受控制的组件设置初始值。

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

所以只需改为：

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

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

1 个答案: