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

输入的值将显示在value的{{1}}属性中，而不是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"));

Answer 2

如果您想获取 syntetic事件的value ，则应通过event.target.value

进行访问

event.target.title 将始终为undefined

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

您应该改为：

onSetTitle(event)
{

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

}

————————————

Syntetic events work just like native HTML events

ReactJS：输入不可编辑

2 个答案: