Javascript Can'；t在输入文本字段中键入

我正在尝试我的React.js的第一点，我很早就被难倒了。。。我有下面的代码，它将搜索表单呈现为

。但是在搜索框中键入内容没有任何作用

大概有什么东西在传递道具和上下状态时丢失了，这似乎是一个常见的问题。但我被难住了——我看不出少了什么

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')
);

var SearchFacet=React.createClass({
handleChange:function（）{
这个.props.onUserInput(
this.refs.searchStringInput.value
)
},
render:function（）{
返回(
搜索：
);
}
});
var SearchTool=React.createClass({
render:function（）{
返回(
搜寻
);
}
});
var Searcher=React.createClass({
getInitialState:函数（）{
返回{
搜索字符串：“”
}
},
handleUserInput:函数（搜索字符串）{
这是我的国家({
searchString:searchString
})
},
render:function（）{
返回(
);
}
});
ReactDOM.render(
,
document.getElementById（'searcher'））
);

---

（最终我会有其他类型的

SearchFacet*

，但我只是想让这个工作正常。）

使用

value={whatever}

将使它成为一个选项，因此您无法在输入字段中键入。您应该使用

defaultValue=“Hello！”

看

---

此外，@davnicwil指出，

onchange

应该是

onchange

。

您没有在

输入中正确设置
onchange
属性的大小写。在JSX中，它必须是
onChange

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

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

例如：

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

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


更改文本（事件）{
这是我的国家(
{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
，否则您必须显式配置库，并且state的名称应该是
form
。
看这个
对我来说，下面的简单更改非常有效

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

setTxtLetter（event.target.value）}/>{/*不起作用*/}

改变。。。值={myPropVal}到。。。defaultValue={myPropVal}

setTxtLetter（event.target.value）}/>{/*Works！！*/}
在类组件上下文中

如果changeHandler方法是普通函数：
handleChange（e）{
this.setState（{[e.target.name]：[e.target.value]}）；
}

它可以这样使用…
onChange={（e）=>this.handleChange（e）}

this.handleChange（e）}>

如果changeHandler方法是箭头函数：
handle=（e）=>{
this.setState（{[e.target.name]：[e.target.value]}）；
}

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



这解决了我的“无法键入反应输入文本字段”问题。
我也面临着这个问题，现在问题已经解决了。请重新更改搜索工具。那么这个问题就可以解决了。
有一次我遇到了类似的错误。让我来描述一下

编辑.js

ImportEdit.js

从“/Edit”导入编辑；
函数ImportEdit（）{
......
...
返回(
)
}
导出默认值导入它

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

错误：.trim（）

.trim（）方法正在修剪我键入的所有空白

注意：如果单独使用Edit.js而不导入，则可以很好地工作
defaultValue而不是value对我有效。
在输入文本字段时尝试记录
此
。可能是
this
不再是
Searcher
组件。感谢FaureHu-在代码中的哪个点记录
this
？尝试从
Searcher.handleUserInput（）
或
SearchFacet.handleChange（）
登录没有任何作用。您可以查看类似问题的我的答案。您可以找到详细的解释：在我的需求中，我希望输入带有enable的字段，并且需要将其设置为来自状态变量的默认值。defaultValue属性很好，但根据状态更改更新默认值时出现问题，是否有办法强制更改默认值？您应该将该问题作为另一个问题发布到Stackoverflow上。@GeoffreyHale我不太确定您所说的误导是什么意思。请参阅此不使用状态的示例：。或者这个是：@Ivan你是对的，两者都是不可变的：
value={whatever}
和
value={this.state.myvalue}
。我本应该澄清一下：使用
onChange={this.handleChange}
和类似
handleChange:function（e）{var newState={}；newState[e.target.name]=e.target.value；this.setState（newState）；}，
使字段再次可变。@Ivan这一个帮助我非常感谢
defaultValue
节省了我的时间。谢谢，非常有帮助。只有您的答案才能完整解释如何解决问题。在何处定义此changeText func？如果它是无状态组件，则在函数内部；如果它是类组件，则在构造函数内部。您不需要在setState中写入此.state。如果你只在setState中写textValue:event.target.value，那么它也能很好地工作。这为我解决了它。谢谢！我认为onChange在Formik中使用时不能正常工作。我也试过，但对我不起作用。你能看看这里吗？
<input type="text" 
        defaultValue={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* Works!! */}

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

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

    export default ImportEdit