反应:元素正在将文本类型的受控输入更改为不受控制
React: Element is changing a controlled input of type text to be uncontrolled
我收到以下错误,但无法确定发生原因
warning.js:36 警告:搜索框正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控(反之亦然)。在组件的生命周期内决定使用受控或非受控输入元素
我有以下文件:
- Searchbox.js
import React, { Component } from 'react';
class Searchbox extends Component {
// render method
render() {
const { value, onChange, onSubmit, children } = this.props
console.log(value)
console.log(onChange)
console.log(onSubmit)
console.log(children)
return (
<section className="search-section">
<form onSubmit={onSubmit}>
<input
type="text"
className="search-box"
value={value}
onChange={onChange}
/>
<button type="submit">{children}</button>
</form>
</section>
)
}
}
export default Searchbox
和 App.js 文件
import React, { Component } from 'react';
import Searchbox from './components/Searchbox'
//import logo from './logo.svg';
import './App.css';
const DEFAULT_TERM = 'High Fidelity'
class App extends Component {
// Constructor
constructor(props) {
super(props)
this.state = {
movie: null,
searchTerm: DEFAULT_TERM
}
this.onSearchSubmit = this.onSearchSubmit.bind(this)
this.onSearchChange = this.onSearchChange.bind(this)
}
// onSearchSubmit method
onSearchSubmit(e) {
e.preventDefault()
console.log("Searching movie with name" + this.status.searchTerm)
}
onSearchChange(e){
console.log(event.target.value)
this.setState({ searchTerm: event.target.value })
}
// render method
render() {
const { movie, searchTerm } = this.state
return (
<div className="App">
<Searchbox
value={searchTerm}
onChange={this.onSearchChange}
onSubmit={this.onSearchSubmit}
>Search
</Searchbox>
</div>
);
}
}
export default App;
加载时一切正常,但是当我在文本字段中键入内容时,会触发错误。
有什么建议吗?
问题出在 onSearchChange 函数中。您已将输入的 onChange 事件命名为 e 但您正在从全局变量 event
中获取值
将 onSearchChange 替换为下面提到的代码:
onSearchChange(event) {
this.setState({ searchTerm: event.target.value })
}
我收到了完全相同的警告。我的 TextFieldItem 是一个子组件,正在通过其道具进行更新。下面一行是罪魁祸首。
const fieldValue = (field.Value == null) ? undefined : field.Value;
更改行以将值从未定义设置为“已解决警告”。
const fieldValue = (field.Value == null) ? '' : field.Value;
React 组件
class TextFieldItem extends React.Component{
constructor(props){
super(props);
this.onChange=this.onChange.bind(this);
}
onChange(e){
event.preventDefault();
const {onFieldChange,field} = this.props;
onFieldChange(e.target.id, e.target.value, e.target.name,field.Type);
}
render(){
const {field, onFieldChange, onRecordUpdate, IsLookupField,record,currentDocumentType} = this.props;
const fieldValue = (field.Value == null) ? '' : field.Value;
return (
<div>
<label>{field.Name}</label>
<input type="text" key={field.Id} className="form-control" id={field.Id} name={field.Name} onChange={this.onChange} value={fieldValue} />
{IsLookupField && <LookupFieldItem record={record} field={field} onRecordUpdate={onRecordUpdate} documentType={currentDocumentType} /> }
</div>
);
}
}
export default TextFieldItem;
我收到以下错误,但无法确定发生原因
warning.js:36 警告:搜索框正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控(反之亦然)。在组件的生命周期内决定使用受控或非受控输入元素
我有以下文件:
- Searchbox.js
import React, { Component } from 'react';
class Searchbox extends Component {
// render method
render() {
const { value, onChange, onSubmit, children } = this.props
console.log(value)
console.log(onChange)
console.log(onSubmit)
console.log(children)
return (
<section className="search-section">
<form onSubmit={onSubmit}>
<input
type="text"
className="search-box"
value={value}
onChange={onChange}
/>
<button type="submit">{children}</button>
</form>
</section>
)
}
}
export default Searchbox
和 App.js 文件
import React, { Component } from 'react';
import Searchbox from './components/Searchbox'
//import logo from './logo.svg';
import './App.css';
const DEFAULT_TERM = 'High Fidelity'
class App extends Component {
// Constructor
constructor(props) {
super(props)
this.state = {
movie: null,
searchTerm: DEFAULT_TERM
}
this.onSearchSubmit = this.onSearchSubmit.bind(this)
this.onSearchChange = this.onSearchChange.bind(this)
}
// onSearchSubmit method
onSearchSubmit(e) {
e.preventDefault()
console.log("Searching movie with name" + this.status.searchTerm)
}
onSearchChange(e){
console.log(event.target.value)
this.setState({ searchTerm: event.target.value })
}
// render method
render() {
const { movie, searchTerm } = this.state
return (
<div className="App">
<Searchbox
value={searchTerm}
onChange={this.onSearchChange}
onSubmit={this.onSearchSubmit}
>Search
</Searchbox>
</div>
);
}
}
export default App;
加载时一切正常,但是当我在文本字段中键入内容时,会触发错误。
有什么建议吗?
问题出在 onSearchChange 函数中。您已将输入的 onChange 事件命名为 e 但您正在从全局变量 event
中获取值将 onSearchChange 替换为下面提到的代码:
onSearchChange(event) {
this.setState({ searchTerm: event.target.value })
}
我收到了完全相同的警告。我的 TextFieldItem 是一个子组件,正在通过其道具进行更新。下面一行是罪魁祸首。
const fieldValue = (field.Value == null) ? undefined : field.Value;
更改行以将值从未定义设置为“已解决警告”。
const fieldValue = (field.Value == null) ? '' : field.Value;
React 组件
class TextFieldItem extends React.Component{
constructor(props){
super(props);
this.onChange=this.onChange.bind(this);
}
onChange(e){
event.preventDefault();
const {onFieldChange,field} = this.props;
onFieldChange(e.target.id, e.target.value, e.target.name,field.Type);
}
render(){
const {field, onFieldChange, onRecordUpdate, IsLookupField,record,currentDocumentType} = this.props;
const fieldValue = (field.Value == null) ? '' : field.Value;
return (
<div>
<label>{field.Name}</label>
<input type="text" key={field.Id} className="form-control" id={field.Id} name={field.Name} onChange={this.onChange} value={fieldValue} />
{IsLookupField && <LookupFieldItem record={record} field={field} onRecordUpdate={onRecordUpdate} documentType={currentDocumentType} /> }
</div>
);
}
}
export default TextFieldItem;