无法在React输入文本字段中输入

我正在尝试使用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*但是我只是想让这一类正常工作。）

您尚未正确将onchange道具放在机箱中input。它必须onChange在JSX中。

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

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

他们将这些输入称为“ 受控组件”，而将使DOM本地处理输入值和随后来自用户的更改的输入称为“非受控组件”。

每当您将valuean 的prop 设置input为某个变量时，就会有一个Controlled Component。这意味着您必须通过某种编程方式来更改变量的值，否则输入将始终保持该值并且永远不会更改，即使您键入- 覆盖输入的本机行为以更新键入时的值在这里反应。

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

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

参见https://facebook.github.io/react/docs/un受控-components.html＃default-values

另外，onchange应该是onChange@davnicwil指出的。

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

例：

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

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

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

我也有同样的问题，在我的情况下，我正确地注入了reducer，但仍然无法在字段中键入。事实证明，如果您正在使用immutable，则必须使用redux-form/immutable。

import {reducer as formReducer} from 'redux-form/immutable';
const reducer = combineReducers{

    form: formReducer
}
import {Field, reduxForm} from 'redux-form/immutable';
/* your component */

请注意，您的状态应类似于state->form否则，您必须显式配置库，状态的名称也应为form。看到这个问题

对我而言，以下简单更改非常有效

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

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

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

在类组件上下文中...

如果changeHandler方法是常规函数：

handleChange(e){
    this.setState({[e.target.name]:[e.target.value]});
}

可以这样使用...onChange={(e)=>this.handleChange(e)}

<input type="text" name="any" value={this.state.any} onChange={(e)=>this.handleChange(e)}></input>

如果changeHandler方法是箭头函数：

handle = (e) =>{
        this.setState({[e.target.name]:[e.target.value]});
    }

可以这样使用... onChange={this.handle}

 <input type="text" name="any2" value={this.state.any2} onChange={this.handle} ></input>

这解决了我的“无法在React输入文本字段中键入”问题。