Блог

У меня есть текстовая область, в которой я хочу провести событие onChange. Когда вводится текст, я хочу вычислить длину введенной строки, а затем передать ее другому компоненту react для отображения количества символов. Однако у меня возникли проблемы с передачей данных в мой компонент react.

Всего у меня есть 3 компонента реакции:

• SegmentCalculator: это мое полное приложение
• Поле ввода: здесь пользователь вводит свою строку
• Поле символов: здесь я хотел бы отобразить количество символов

Вот что у меня есть до сих пор:

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

У вас есть полууправляемый ввод, то есть он имеет локальное состояние, но вы его не обновляете.

Передайте входное состояние от родителя.

InputBox — Передайте value реквизит textarea элементу. Передайте onChange целевое значение события 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>
    );
  }
}
 

Сегментный калькулятор — Переход this.state.inputChars к InputBox value реквизиту. Входная длина является производным состоянием, поэтому нет причин хранить ее в состоянии.

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