无法键入 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*，但我只是想让这一个工作。)

230862 次浏览
小开

使用 value={whatever}将使您不能在输入字段中输入。您应该使用 defaultValue="Hello!"。

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

而且，正如@davnicwil 指出的那样，onchange应该是 onChange。

小开
最佳答案

在 input中你没有正确地将你的 onchange道具封装。在 JSX 中它需要是 onChange。

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

将一个 value道具传递给一个 <input>，然后以某种方式更改使用 onChange处理程序响应用户交互而传递的值，这个主题被认为是相当好的 在文件里。

它们引用诸如 受控元件这样的输入，并引用那些让 DOM 本机处理输入值和随后来自用户的更改的输入，如 无法控制的部件。

每当你把 input的 value支柱设置成某个变量时，你有一个受控元件。这意味着 必须的可以通过一些编程方式来改变变量的值，否则输入将始终保持这个值，并且永远不会改变，即使在输入时也是如此——输入的本机行为(在输入时更新其值)在这里是 覆盖 by React。

因此，您正确地从 state 获取了该变量，并且有一个处理程序来更新状态，所有这些都设置得很好。问题是因为您有 onchange而不是正确的 onChange处理程序从来没有被调用，所以当您输入输入时，value从来没有被更新。当你使用 onChange的处理程序 是调用，value 是更新时，你输入，你看到你的变化。

小开

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

例如:

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


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

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

小开

我也有同样的问题，在我的情况下，我注射减速器正确，但我仍然不能在现场输入。事实证明，如果使用 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 */}

Change... value = { myPropVal } to... 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>

这就解决了我“无法输入反应输入文本字段”的问题。

小开

将 onChange 设置为 searchTool。

小开

我曾经遇到过类似的错误，让我来描述一下。

编辑 js

   // 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

问题是: < strong > 我不能使用空格键(即如果我按下空格键，我没有看到空格输入)

The Bug: < strong >

方法正在修剪我键入的所有空白

注意: Edit.js 在没有导入的情况下单独使用时工作得很好

小开

使用 defaultValue 代替 value

当字段为空时，我们使用 value，但是如果我们必须从已经在输入框中的值中键入或更新该值。我们必须使用 defaultValue

小开

在我的情况下，我使用的材质 UI，也需要 name="data"(相同的状态)

 <TextField name="fecha" id="fecha" label="fecha"  value={this.state.fecha} onChange={this.handleInputChange} />

反应工作需要 名称值

小开

我有一个类似的问题，我通过添加一个 value和一个 name参数的每个输入我使用它。

举个例子:

const onValueChange = (e) => {
setProduct({ ...product, [e.target.name]: e.target.value })
}
//...
<input
type="number"
id="exampleFormControlInput4"
label="Price :"
placeholder="Enter price"
text="Must be a number"
aria-describedby="exampleFormControlInputHelpInline"
onChange={(e) => onValueChange(e)}
value={price}
name="price"
/>

提交答案