无法输入React输入文本字段

Question

我正在尝试我的第一部分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*但我只是想让这个工作.)

Answer 1

使用value={whatever}将使它无法输入输入字段.你应该用defaultValue="Hello!".

请参阅https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

此外,onchange应该onChange像@davnicwil指出的那样.

Answer 2

你还没有正确地装好你的onchange道具input.它需要onChange在JSX中.

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

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

它们将此类输入称为受控组件,并引用输入,而是让DOM本身处理输入的值以及用户作为非受控组件的后续更改.

无论何时将a的valueprop 设置input为某个变量,都有一个受控组件.这意味着您必须通过某些编程方式更改变量的值,否则输入将始终保持该值并且永远不会更改,即使您键入 - 输入的本机行为,更新其在键入时的值,也会被覆盖通过React在这里.

所以,你正确地从状态中获取该变量,并有一个处理程序来更新状态所有设置正常.问题是因为你有onchange而且没有正确onChange的处理程序永远不会被调用,因此value当你输入输入时,它永远不会被更新.当你使用onChange处理程序被调用时,value 是当你输入更新,你可以看到你的变化.

Answer 3

对我来说，以下简单的更改效果很好

<input type="text" 
        value={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* does not work */}

将... value={myPropVal} 更改为... defaultValue={myPropVal}

<input type="text" 
        defaultValue={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* Works!! */}

Answer 4

这可能是由onChange函数未更新输入中提到的正确值引起的.

例:

<input type="text" value={this.state.textValue} onChange = {this.changeText}></input>

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

在onChange函数中更新提到的值字段.

Answer 5

使用defaultValue代替值

当字段为空时，我们使用值，但如果我们必须根据输入框中已有的值键入或更新值。我们必须使用defaultValue