无法在React输入文本字段中输入 [英] Can't type in React input text field

问题描述

我正在尝试我的React.js的第一部分，并且很早就陷入困境...我有下面的代码，该代码将搜索表单呈现为<div id="search"></div>.但是在搜索框中输入内容无济于事.

I'm trying my first bit of React.js and am stumped early on... I have the code below, which renders a search form into <div id="search"></div>. But typing in the search box does nothing.

大概是在传递道具并上下移动时会丢失某些东西，这似乎是一个常见的问题.但是我很困惑-我看不到缺少的东西.

Presumably something is going missing passing the props and state up and down, and this seems like a common problem. But I'm stumped - I can't see what's missing.

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*，但我只是想使这一类正常工作.)

(Eventually I will have other types of SearchFacet* but I'm just trying to get this one working.)

推荐答案

您没有将onchange道具正确地放在input中.在JSX中必须为onChange.

You haven't properly cased your onchange prop in the input. It needs to be onChange in JSX.

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

将value道具传递给<input>，然后以某种方式更改通过onChange处理程序响应用户交互而传递的值的主题已经很好地考虑了

The topic of passing a value prop to an <input>, and then somehow changing the value passed in response to user interaction using an onChange handler is pretty well-considered in the docs.

他们将这样的输入称为受控组件，以及指的是让DOM本地处理输入值和随后来自用户的更改的输入，如不受控制的组件.

They refer to such inputs as Controlled Components, and refer to inputs that instead let the DOM natively handle the input's value and subsequent changes from the user as Uncontrolled Components.

每当将input的value属性设置为某个变量时，您就有一个受控组件.这意味着您必须通过某种编程方式必须更改变量的值，否则输入将始终保持该值并且永远不会更改，即使您键入了输入的本机行为以进行更新它在键入时的值由React在此处覆盖.

Whenever you set the value prop of an input to some variable, you have a Controlled Component. This means you must change the value of the variable by some programmatic means or else the input will always hold that value and will never change, even when you type -- the native behaviour of the input, to update its value on typing, is overridden by React here.

因此，您可以正确地从状态中获取该变量，并可以设置一个处理程序来更新状态.问题是因为您拥有onchange而不是正确的onChange，所以从未调用过该处理程序，因此当您键入输入时，从未更新过value.当您确实使用onChange调用了处理程序 时，键入时会更新value ，并且您会看到所做的更改.

So, you're correctly taking that variable from state, and have a handler to update the state all set up fine. The problem was because you have onchange and not the correct onChange the handler was never being called and so the value was never being updated when you type into the input. When you do use onChange the handler is called, the value is updated when you type, and you see your changes.

这篇关于无法在React输入文本字段中输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！