ReactJS：输入不可编辑

Question

我正在创建一个研究“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

Answer 1

输入的值将出现在event.target 的value 属性中，而不是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>

Answer 2

如果你想获得一个合成事件的value，你应该通过event.target.value访问它

event.target.title 将永远是 undefined

这就是您的输入值没有更新的原因。

你应该这样做：

onSetTitle(event)
{

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

}

———————————

Syntetic events work just like native HTML events