无法在 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

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

Answer 2

你没有正确地将你的 onchange 属性放在 input 中。它需要在 JSX 中为 onChange。

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

将value 属性传递给<input>，然后使用onChange 处理程序以某种方式更改传递的值以响应用户交互的主题是经过深思熟虑的in the docs。

他们将此类输入称为 Controlled Components，并将让 DOM 本地处理输入值和来自用户的后续更改的输入称为 Uncontrolled Components。

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

defaultValue 而不是 value 对我有用。

Answer 5

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

例子：

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

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

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

Answer 6

我也有同样的问题，在我的情况下，我正确注入了减速器，但我仍然无法输入字段。事实证明，如果你使用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。 看到这个issue

Answer 7

在类组件上下文中...

如果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 输入文本字段”的问题。

Answer 8

一旦我遇到了类似的错误。让我描述一下。

Edit.js

   // components returns edit form 
   
   function EditVideo({id}) {
   .....
   
   // onChange event listener 
    const handleChange = (e) => {
       setTextData({
           ...textData,
           [e.target.name]: e.target.value.trim()
        });
     }
  
   ....
   ...
   }
)

ImportEdit.js

   import Edit from './Edit';
   
    function ImportEdit() {
    ......
     ...
    return (
        <div>
            <EditVideo id={id}/>
        </div>
       )
    }

    export default ImportEdit

问题是： 我无法使用空格键（即，如果我按空格键，我没有看到空格输入）

错误： .trim()

.trim() 方法正在修剪我输入的所有空白

注意： Edit.js 在不导入的情况下单独使用时工作正常

Answer 9

将 onChange 赋予 searchTool。