Question

这是代码

  render () {
        if (this.props && this.props.list) {
            return (
                <div className="List_select">
                    {!this.state.editing
                    && <div><button className="List_delete" onClick={(ev) => {
                        ev.preventDefault();
                        this.props.handleDelete(this.props.list);
                    }} /> &nbsp;&nbsp;
                        <NavLink to={{
                        pathname: '/list/' + this.props.userId + '|' + this.props.list
                    }}>
                        {this.props.list}
                        </NavLink>&nbsp;&nbsp;

                        <button className="List_edit" onClick={(ev) => {
                            ev.preventDefault();
                            this.setState({editing: true})
                        }} /></div>
                    }
                    {this.state.editing
                    && <form onSubmit={(ev) => {
                        ev.preventDefault();
                        this.props.handleEdit(this.props.list, this.state.listName);
                        this.setState({editing: false})
                    }}><input type="text" name="listName" className="List_input" value={this.props.list} onChange={(ev) => {
                        this.setState({listName: ev.target.value});
                    }} />
                        <button type="submit" value="submit" name="submit" className="StandardButton-1">Submit</button>
                    </form>
                    }
                </div>
            )
        } else {
            return ""
        }
    }

该代码不允许用户填写文本字段。有人知道我在做什么错吗？我完全可以编辑文本字段。我有onChange触发器，并做了所有出色的工作来处理代码中正确的文本字段。

Answer 1

您在给它赋值，但是在onChange中您更改了另一个值。两者具有相同的值:)

   <input type="text" name="listName" className="List_input" 
     value={this.state.listName} 
     onChange={(ev) => {this.setState({listName: ev.target.value})  }}                       
   />

Answer 2

value={this.props.list} onChange={(ev) => {
                    this.setState({listName: ev.target.value});

listName和list必须匹配，并且您必须使用this.state.list

Answer 3

您必须从 BlobClient 而不是 state 分配文本框值，因为 props 是只读的。因此，您必须将 props 替换为 this.props.list

this.state.listName

反应是不允许我编辑文本字段

3 个答案: