Javascript 无法在 React 输入文本字段中输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34006333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't type in React input text field
提问by Phil Gyford
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.
我正在尝试我的第一个 React.js 并且很早就被难住了......我有下面的代码，它将搜索表单呈现为<div id="search"></div>. 但是在搜索框中输入没有任何作用。
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')
);
(Eventually I will have other types of SearchFacet*but I'm just trying to get this one working.)
（最终我会有其他类型的，SearchFacet*但我只是想让这个工作。）
采纳答案by davnicwil
You haven't properly cased your onchangeprop in the input. It needs to be onChangein JSX.
您没有onchange在input. 它需要onChange在 JSX 中。
<input
type="text"
value={this.props.searchString}
ref="searchStringInput"
onchange={this.handleChange} <--[should be onChange]
/>
The topic of passing a valueprop to an <input>, and then somehow changing the value passed in response to user interaction using an onChangehandler is pretty well-considered in the docs.
将valueprop传递给 an <input>，然后以某种方式更改传递的值以使用onChange处理程序响应用户交互的主题在 docs 中得到了很好的考虑。
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.
它们将此类输入称为受控组件，并将让 DOM 以本机方式处理输入值和来自用户的后续更改的输入称为不受控制的组件。
Whenever you set the valueprop of an inputto some variable, you have a Controlled Component. This means you mustchange 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 overriddenby React here.
每当您将valuean的prop设置input为某个变量时，您就会拥有一个 Controlled Component。这意味着您必须通过某种编程方式更改变量的值，否则输入将始终保持该值并且永远不会改变，即使您键入 - 输入的本机行为，在键入时更新其值，被覆盖在这里反应。
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 onchangeand not the correct onChangethe handler was never being called and so the valuewas never being updated when you type into the input. When you do use onChangethe handler iscalled, the valueisupdated when you type, and you see your changes.
因此，您正确地从状态中获取该变量，并有一个处理程序来更新所有设置良好的状态。问题是因为您拥有onchange而不是正确onChange的处理程序从未被调用，因此value在您输入输入时从未被更新。当你使用onChange处理程序被调用时，value是当你输入更新，你可以看到你的变化。
回答by Ivan
Using value={whatever}will make it so you cannot type in the input field. You should use defaultValue="Hello!".
使用value={whatever}将使您无法在输入字段中输入。你应该使用defaultValue="Hello!".
See https://facebook.github.io/react/docs/uncontrolled-components.html#default-values
见https://facebook.github.io/react/docs/uncontrolled-components.html#default-values
Also, the onchangeshould be onChangeas @davnicwil points out.
此外，onchange应该onChange像@davnicwil 指出的那样。
回答by sunaina kotekar
This might be caused by the onChange function is not updating the proper value which is mentioned in the input.
这可能是由于 onChange 函数没有更新输入中提到的正确值。
Example:
例子：
<input type="text" value={this.state.textValue} onChange = {this.changeText}></input>
changeText(event){
this.setState(
{textValue : event.target.value}
);
}
in the onChange function update the mentioned value field.
在 onChange 函数中更新提到的值字段。
回答by Seyed Jalal Hosseini
I also have same problem and in my case I injected reducer properly but still I couldn't type in field. It turns out if you are using immutableyou have to use redux-form/immutable.
我也有同样的问题，在我的情况下，我正确注入了减速器，但仍然无法在字段中输入。事实证明，如果您正在使用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 */
Notice that your state should be like state->formotherwise you have to explicitly config the library also the name for state should be form.
see this issue
请注意，您的状态应该是这样，state->form否则您必须显式配置库，状态名称也应该是form. 看到这个问题
回答by Nelles
For me the following simple change worked perfectly
对我来说，以下简单的更改效果很好
<input type="text"
value={props.letter}
onChange={event => setTxtLetter(event.target.value)} /> {/* does not work */}
change... value={myPropVal} to... defaultValue={myPropVal}
将... value={myPropVal} 更改为... defaultValue={myPropVal}
<input type="text"
defaultValue={props.letter}
onChange={event => setTxtLetter(event.target.value)} /> {/* Works!! */}
