Tengo el siguiente campo de entrada como se muestra a continuación. En el desenfoque, la función llama a un servicio para actualizar el valor de entrada al servidor y, una vez que se completa, actualiza el campo de entrada.
¿Cómo puedo hacer que funcione? Puedo entender por qué no me permite cambiar los campos, pero ¿qué puedo hacer para que funcione?
No puedo usar el valor predeterminado porque defaultValue estos campos por otros
<input value={this.props.inputValue} onBlur={this.props.actions.updateInput} />
Para que el valor de entrada sea editable, debe tener un controlador onChange que actualice el valor. y dado que desea llamar a una función onBlur, debe vincularla como onBlur={() => this.props.actions.updateInput()}
componentDidMount() { this.setState({inputValue: this.props.inputValue}); } handleChange = (e) => { this.setState({inputValue: e.target.value}); } <input value={this.state.inputValue} onChange={this.handlechange} onBlur={() => this.props.actions.updateInput(this.state.inputValue)} />Maneras de hacer esto:
No asigne la propiedad de value al input field , siempre que el método onblur se active, presione la API de esta manera:
<input placeholder='abc' onBlur={(e)=>this.props.actions.updateInput(e.target.value)} />Actualizar valor al servidor:
updateInput(value){ /*update the value to server*/ } Si está asignando la propiedad de value al campo de input mediante this.props.inputValue , luego use el método onChange , pase el valor de vuelta al componente principal, cambie el valor de entrada usando inputValue en el setState principal, funcionará así:
<input value={this.props.inputValue} onChange={(e)=>this.props.onChange(e.target.value)} onBlur={()=>this.props.actions.updateInput} />En el componente principal:
onChange(value){ this.setState({inputvalue:value}); }Actualizar valor al servidor:
updateInput(value){ /*update the value to server*/ }Deberá vincular un evento onChange para actualizar su estado. Asegúrese de usar el método bind en su constructor para no perder el contexto 'this' dentro de su método de controlador de eventos onChange. Luego querrá devolver el valor a su método de entrada de actualización onBlur. Algo como esto:
constructor(props) { super(props); this.state = { inputValue: props.inputValue }; this.handleChange = this.handleChange.bind(this); }; handleChange = (e) => { this.setState({inputValue: e.target.value}); } <input value={this.state.inputValue} onChange={this.handleChange} onBlur={() => this.props.actions.updateInput(this.state.inputValue)} />