Tengo un área de texto donde quiero tener un evento onChange. Cuando se ingresa texto, quiero calcular la longitud de la cadena ingresada y luego pasarla a otro componente de reacción para mostrar el conteo de caracteres. Sin embargo, tengo problemas para pasar los datos a mi componente de reacción.
Tengo 3 componentes de reacción en total:
Esto es lo que tengo hasta ahora:
class InputBox extends React.Component { constructor(props) { super(props); this.state = { value: null, } } render() { return ( <label> Input: <textarea type="text" value={this.state.value} onChange={() => this.props.onChange(this.state.value)} /> </label> ); } } class CharacterBox extends React.Component { render() { return ( <div>Character Count:{this.props.charCount}</div> ) } } class SegmentCalculator extends React.Component { constructor(props) { super(props); this.state = { inputChars: null, }; } handleChange(value) { this.setState({ inputChars: value, inputCharsLength: value.length, }); } render() { let charaterCount = this.state.inputCharsLength; return ( <div className="segment-calculator"> <div className="input-box"> <InputBox onChange={() => this.handleChange()} /> </div> <div className="characters"> <CharacterBox charCount={charaterCount}/> </div> </div> ); } }Tiene una entrada semicontrolada, lo que significa que tiene un estado local pero no lo actualiza.
Pase el estado de entrada del padre.
InputBox: pasa la propiedad de value al elemento textarea . Pase el valor de destino del evento onChange a la propiedad de devolución de llamada onChange .
class InputBox extends React.Component { render() { return ( <label> Input: <textarea type="text" value={this.props.value} onChange={(e) => this.props.onChange(e.target.value)} /> </label> ); } } SegmentCalculator: pase this.state.inputChars a la propiedad de value InputBox . La longitud de entrada se deriva del estado, por lo que no hay razón para almacenarla en el estado.
class SegmentCalculator extends React.Component { constructor(props) { super(props); this.state = { inputChars:'', }; } handleChange = (value) => { this.setState({ inputChars: value, }); } render() { const { inputChars } = this.state; return ( <div className="segment-calculator"> <div className="input-box"> <InputBox onChange={this.handleChange} value={inputChars} /> </div> <div className="characters"> <CharacterBox charCount={inputChars.length}/> </div> </div> ); } } class InputBox extends React.Component { render() { return ( <label> Input: <textarea type="text" value={this.props.value} onChange={(e) => this.props.onChange(e.target.value)} /> </label> ); } } class CharacterBox extends React.Component { render() { return ( <div>Character Count:{this.props.charCount}</div> ) } } class SegmentCalculator extends React.Component { constructor(props) { super(props); this.state = { inputChars: '', }; } handleChange = (value) => { this.setState({ inputChars: value, }); } render() { const { inputChars } = this.state; return ( <div className="segment-calculator"> <div className="input-box"> <InputBox onChange={this.handleChange} value={inputChars} /> </div> <div className="characters"> <CharacterBox charCount={inputChars.length}/> </div> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render( <SegmentCalculator />, rootElement ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root" />