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

Question

Here's the code

  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 ""
        }
    }

The code is not letting the user fill out the text field. Does anyone know what I'm doing wrong? I can edit the text fields at all. I have the onChange trigger and doing all the good stuff to handle text fields correct in the code.

Answer 1

You are giving it value but in onChange your changing another value. Have the same value in both :)

   <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});

the listName and list must match, and you have to use this.state.list

Answer 3

You have to assign the text box value from state not props , because props is readonly. So you have to replace this.props.list with this.state.listName

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