无法在 React 输入文本字段中键入内容

2022-08-30 02:38:44

我正在尝试我的第一点 React.js,但很早就被难住了......我有下面的代码,它将搜索表单呈现为.但是在搜索框中键入内容不会执行任何操作。<div id="search"></div>

大概有些东西在道具和状态上下丢失了,这似乎是一个常见的问题。但是我很困惑 - 我看不到缺少什么。

var SearchFacet = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.searchStringInput.value
    )
  },
  render: function() {
    return (
      <div>
        Search for:
        <input
          type="text"
          value={this.props.searchString}
          ref="searchStringInput"
          onchange={this.handleChange} />
      </div>
    );
  }
});

var SearchTool = React.createClass({
  render: function() {
    return (
      <form>
        <SearchFacet 
          searchString={this.props.searchString}
          onUserInput={this.props.onUserInput}
         />
        <button>Search</button>
      </form>
    );
  }
});

var Searcher = React.createClass({
  getInitialState: function() {
    return {
      searchString: ''
    }
  },

  handleUserInput: function(searchString) {
    this.setState({
      searchString: searchString
    })
  },

  render: function() {
    return (
      <div>
        <SearchTool 
          searchString={this.state.searchString}
          onUserInput={this.handleUserInput}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <Searcher />,
  document.getElementById('searcher')
);

(最终我会有其他类型的,但我只是想让这个工作。SearchFacet*


答案 1

使用将使它,因此您无法在输入字段中键入内容。您应该使用 .value={whatever}defaultValue="Hello!"

查看 https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

此外,应该像@davnicwil指出的那样。onchangeonChange


答案 2

您尚未在 .它需要在JSX中。onchangeinputonChange

<input
  type="text"
  value={this.props.searchString}
  ref="searchStringInput"
  onchange={this.handleChange} <--[should be onChange]
/>  

将 prop 传递给 一个 ,然后以某种方式更改使用处理程序响应用户交互而传递的值的主题在文档中得到了很好的考虑。value<input>onChange

它们将此类输入称为受控组件,并引用相反的输入,这些输入使 DOM 以本机方式处理输入的值以及来自用户的后续更改作为不受控制的组件

每当您将 的 prop 设置为某个变量时,您就有一个受控组件。这意味着你必须通过某种编程方式更改变量的值,否则输入将始终保持该值并且永远不会改变,即使你键入 - 输入的本机行为,以在键入时更新其值,在这里被 React 覆盖valueinput

因此,您正确地从状态中获取该变量,并有一个处理程序来更新状态,所有设置都很好。问题是因为你有而不是正确的处理程序从未被调用,所以当你输入输入时,它永远不会更新。当您使用处理程序调用处理程序,当您键入时,将更新,并且您会看到所做的更改。onchangeonChangevalueonChangevalue