Что я не верно делаю при перезаписи state?

Question

[Алексей Милютин]

Здравствуйте, почему state не переписывается на новый и какие ошибки и плохие практики вы видете в моем коде?

class Li extends React.Component {
  render() {
    return (
      <li>{this.props.text}</li>
    )
  }
}

class Elem extends React.Component {
  render() {
    return (<div className="element">
      <ul>
        <Li text={this.props.text}/>
      </ul>
    </div>)
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: 'hello world'};
  }
  render() {
    return (
      <div className="pageWrapper">
        <h1>To Do List</h1>
        <input placeholder="Введите текст" onChange={this.submitText} type="text" className="inp"/>
        <Elem text={this.state.text}/>
      </div>
    )
  }
  submitText() {
    let inpValue = document.querySelector(".inp").value;
    this.setState({
      text: inpValue
    });
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));

Answer 1

[0xD34F]

Контекст потерялся. Ну и не надо пытаться достучаться до элемента через querySelector - он доступен как свойство target объекта события.

submitText = (e) => {
  this.setState({
    text: e.target.value,
  });
}

Comments

[Алексей Милютин]

Теперь он ругается setState undefined

[0xD34F]

Алексей Милютин, неправда.

[Алексей Милютин]

0xD34F, я вас не так понял, вы правы. Нужно было дописать и в setState строку e.target.value

Answer 2

[Антон Спирин]

1. Прямые обращения к DOM используются в очень редких исключениях. Например:

document.body.classList.add('someClass');

2. Метод submitText, следует переименовать в handleChange. Вы не делаете никаких submit по изменению input.
3. При передаче в input метод теряет контекст надо либо делать bind:

constructor(props) {
  super(props);
  this.state = {text: 'hello world'};
  this.handleChange = this.handleChange.bind(this);
}

либо использовать свойство класса:

class App extends React.Component {
  // ...
  hanldeCHange = e => {
    this.setState({
      text: e.target.value,
  });
  // ...
}

4. Исправленный код:
<input onChange={this.handleChange} />

class App extends React.Component {
  // ...
  hanldeCHange = e => {
    this.setState({
      text: e.target.value,
  });
  // ...
}

Comments

[Алексей Милютин]

Спасибо большое за развернутый ответ!