ReactJS: ввод не редактируется - PullRequest
Новая
       21

ReactJS: ввод не редактируется

0 голосов
/ 24 февраля 2019

Я создаю учебное приложение "Laravel-ReactJS", в котором у меня есть форма в компоненте.Проблема в том, что то, что я делаю, не обновляется.

Однако я пробовал этот же код в автономном приложении React (без laravel), и код работал без проблем.

Вот мой код: 

constructor()
{
  super();

  this.state = {
    title: ''
  };
}

onSetTitle(event)
{
  console.log(event.target.title);

  this.setState({
    title: event.target.title
  });

  console.log(this.state.title);
}

render (
  return (
    <div className="col-lg-12 col-md-6 col-sm-6 form-group">
      <label>Name<em>*</em></label>
      <input 
        type="text" 
        name="title" 
        id="title" 
        className="form-control" 
        onChange={this.onSetTitle.bind(this)} 
        value={this.state.title}
      />
    </div>
  )
)

Пожалуйста, скажите мне, что я здесь не так делаю.

Я следую этому уроку на YouTube https://youtu.be/aDpoKnBlCCM

Ответы [ 2 ]

0 голосов
/ 24 февраля 2019

Значение ввода будет присутствовать в свойстве value event.target, а не title. 

onSetTitle(event) {
  this.setState({
    title: event.target.value
  });
}


class App extends React.Component {
  constructor() {
    super();

    this.state = {
      title: ""
    };
  }

  onSetTitle(event) {
    this.setState({
      title: event.target.value
    });
  }

  render() {
    return (
      <div className="col-lg-12 col-md-6 col-sm-6 form-group">
        <label>
          Name<em>*</em>
        </label>
        <input
          type="text"
          name="title"
          id="title"
          className="form-control"
          onChange={this.onSetTitle.bind(this)}
          value={this.state.title}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>
0 голосов
/ 24 февраля 2019

Если вы хотите получить value синтаксического события , вам необходимо получить к нему доступ через event.target.value

event.target.title всегда будетbe undefined

Вот почему значение вашего входа не обновляется.

Вместо этого вы должны сделать следующее: 

onSetTitle(event)
{

  this.setState({
    title: event.target.value
  });

}

———————————

Синтетические события работают так же, как собственные события HTML

...