Creo que me perdí algo, pero no sé qué es, sé que value={this.text} vinculará el valor del estado, pero dado que se trata de una edición en línea, quiero llenar el campo de entrada con su valor existente en lugar de dejarlo en blanco. .
http://jsbin.com/fugowebovi/1/editar
class TodoItem extends React.Component { constructor(){ super() this.state = { text: '', isEditing: false }; this.onClickEdit = this.onClickEdit.bind(this); this.onSaveEdit = this.onSaveEdit.bind(this); this.onTextChanged = this.onTextChanged.bind(this); } onClickEdit(){ this.setState({isEditing: !this.state.isEditing}); } onSaveEdit(){ this.setState({ text: this.state.text, isEditing: false }); } onTextChanged(e){ this.setState({text: e.target.value}); } render(){ return( <li> {this.state.isEditing ? '' : <span>{this.props.item}</span>} {this.state.isEditing ? <span><input value={this.props.item} type="text" onChange={this.onTextChanged}/></span> :''} {this.state.isEditing ? '' : <button onClick={this.onClickEdit}>Edit</button>} <button onClick={this.onSaveEdit}>Save</button> </li> ) } }ahora el problema es que bloqueó la pulsación de tecla.
Cambie <input value={this.props.item} type="text" onChange={this.onTextChanged}/> a
<input value={this.state.text} type="text" onChange={this.onTextChanged}/>
Como está construyendo un componente controlado, debe proporcionarle su texto actual como valor. Ver componente controlado en los documentos
Usas el valor de props y cambias el valor del estado local. Es por eso que el valor de entrada no se cambia.
Prueba esto:
class TodoItem extends React.Component { constructor(props){ super() this.state = { text: props.item, isEditing: false }; this.onClickEdit = this.onClickEdit.bind(this); this.onSaveEdit = this.onSaveEdit.bind(this); this.onTextChanged = this.onTextChanged.bind(this); } onClickEdit(){ this.setState({isEditing: !this.state.isEditing}); } onSaveEdit(){ this.setState({ isEditing: false }); } onTextChanged(e){ this.setState({text: e.target.value}); } render(){ return( <li> {this.state.isEditing ? '' : <span>{this.state.text}</span>} {this.state.isEditing ? <span><input value={this.state.text} type="text" onChange={this.onTextChanged}/></span> :''} {this.state.isEditing ? '' : <button onClick={this.onClickEdit}>Edit</button>} <button onClick={this.onSaveEdit}>Save</button> </li> ) } }