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

如果您想获取 合成事件 的 value，您应该通过 event.target.value

访问它

event.target.title 永远是 undefined

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

你应该这样做：

onSetTitle(event)
{

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

}

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

Syntetic events work just like native HTML events

Answer 2

输入的值将出现在 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>

ReactJS：输入不可编辑

ReactJS: input is not editable

reactjs

input

readonly