Связывание двух входных текстов с помощью React - PullRequest
Новая
       9

Связывание двух входных текстов с помощью React

0 голосов
/ 03 октября 2018

Я изучаю React и пытаюсь создать программу с React, которая будет брать тексты из двух полей ввода и связывать их.Я получаю поля ввода, но функция onClick не работает.Был бы признателен, если бы кто-то мог указать, что я делаю неправильно.

Пример 

 <div id='root'></div>
<script type="text/babel">
  class CombineText extends React.Component {
    constructor(props) {
      super(props);
      this.state = {pretext: '', posttext:'', wholetext: '' };
    }

    combineText = () => {
      this.setState({
        wholetext: this.state.pretext + this.state.posttext
      });
    }
    textChanged = (event) => {
      this.setState({[event.target.name]: event.target.value});
    }

    render() {
      return (
        <div>
          <p>{this.state.wholetext}</p>
          <input type="text" id="pretext" onChange={this.textChanged} /> 
          <input type="text" id="posttext" onChange={this.textChanged} /> 
          <button onClick={this.combineText}>Press me</button>
        </div>
      );
    }
  }
  ReactDOM.render(<CombineText />, document.getElementById('root'));
</script>

1 Ответ

0 голосов
/ 03 октября 2018

Необходимо внести два изменения,

Первый : использовать event.target.id при настройке состояния при изменении ввода, поскольку атрибут name не определен на входе

Секунда : укажите button type равным button, поскольку по умолчанию submit и onClick на кнопке отправки обновляет страницу.Или вы можете написать event.preventDefault() в методе combText, чтобы предотвратить поведение действия отправки по умолчанию 

  class CombineText extends React.Component {
    constructor(props) {
      super(props);
      this.state = {pretext: '', posttext:'', wholetext: '' };
    }

    combineText = () => {
      this.setState({
        wholetext: this.state.pretext + this.state.posttext
      });
    }
    textChanged = (event) => {
      this.setState({[event.target.id]: event.target.value});
    }

    render() {
      return (
        <div>
          <p>{this.state.wholetext}</p>
          <input type="text" id="pretext" onChange={this.textChanged} /> 
          <input type="text" id="posttext" onChange={this.textChanged} /> 
          <button type="button" onClick={this.combineText}>Press me</button>
        </div>
      );
    }
  }
  ReactDOM.render(<CombineText />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>
...