Estoy tratando de escribir una aplicación para tomar/organizar notas y me encontré con un error frustrante.
Aquí está mi componente:
import React from 'react'; const Note = (props) => { let textarea, noteForm; if (props.note) { return ( <div> <button onClick={() => { props.handleUpdateClick(props.selectedFolderId, props.selectedNoteId, textarea.value); }}> Update </button> <textarea defaultValue={props.note.body} ref={node => {textarea = node;}} /> </div> ); } else { return <div></div>; } }; export default Note;Tal como está actualmente, cada vez que cambio entre notas y vuelvo a renderizar el componente de la nota con contenido nuevo del accesorio note.body, el área de texto no cambia y retiene el contenido de la nota anterior. Intenté usar el atributo value en lugar del atributo defaultValue para el área de texto que soluciona el problema del contenido del área de texto que no cambia cuando el componente se vuelve a representar, pero cuando lo hago, ya puedo escribir en el campo de área de texto. para actualizar la nota
¿Alguien sabe alguna forma en que pueda permitir que los usuarios escriban en el campo de texto para actualizar la nota y que el contenido del área de texto cambie cuando renderizo notas diferentes?
Gracias
El problema es que establecer el valor para su accesorio hará que todas las re-renderizaciones del componente usen el mismo accesorio, por lo que el texto nuevo se borrará. Una solución es conservar el texto en el estado local del componente. Para escuchar simultáneamente los cambios de accesorios, puede establecer el estado cuando recibe nuevos accesorios.
const Note = React.createClass({ getInitialState() { return { text : this.props.note.body } }, componentWillReceiveProps: function(nextProps) { if (typeof nextProps.note != 'undefined') { this.setState({text: nextProps.note.body }); } }, render() { if (this.props.note) { return ( <div> <button onClick={(e) => { // Fire a callback that re-renders the parent. // render(this.textarea.value); }}> Update </button> <textarea onChange={e => this.setState({ text : e.target.value })} value={this.state.text} ref={node => {this.textarea = node;}} /> </div> ); } else { return <div></div>; } } });https://jsfiddle.net/69z2wepo/96238/
Si está utilizando redux, también puede activar una acción en el evento de cambio de la entrada para activar una nueva representación. Podría conservar el valor de entrada en un reductor.
Debido a que componentWillReceiveProps ahora no es seguro, la respuesta de Max Sindwani ahora está un poco desactualizada.
Pruebe estos pasos:
shouldComponentUpdate() en <textarea> puede intercambiar el atributo defaultValue por value (solo use event.preventDefault() en el controlador para que un usuario pueda continuar actualizando el texto si es necesario)
import React from 'react'; export class Note extends React.Component { constructor(props) { super(props); this.state={text: this.props.note.body} } shouldComponentUpdate(nextProps) { if(nextProps.note.body !== this.state.text) { this.setState({text: nextProps.note.body}) return true; } return false; } updateText = (event) => { event.preventDefault(); this.setState({text: nextProps.note.body}); } render() { if (this.props.note) { return ( <div> <textarea onChange={this.updateText} value={this.state.text} name={'display'} /> </div> ); } else { return <div></div>; } }});