[英]React change input value onChange
This is my SearchForm.js , handleKeywordsChange
must handle input keywords
changes这是我的SearchForm.js , handleKeywordsChange
必须处理输入keywords
的变化
import React from 'react';
import ReactDOM from 'react-dom';
class SearchForm extends React.Component {
constructor(props) {
super(props)
this.state = {
keywords: '',
city: '',
date: ''
}
//this.handleChange = this.handleChange.bind(this)
//this.handleSubmit = this.handleSubmit.bind(this)
this.handleKeywordsChange = this.handleKeywordsChange.bind(this);
}
handleKeywordsChange(e) {
console.log(1);
this.setState({
value: e.target.value
});
}
render() {
return (
<form className='form search-form' onSubmit={this.handleSubmit}>
<div className="form-row">
<div className="form-group col-md-5">
<label htmlFor="keywords">Keywords</label>
<input type="text" className="form-control" name="keywords" id="keywords" placeholder="Keywords" onChange={this.handleKeywordsChange} value={this.state.keywords} />
</div>
<div className="form-group col-md-5">
<label htmlFor="city">City</label>
<input type="text" className="form-control" name="city" id="city" placeholder="City" onChange={this.handleChange} value={this.state.city} />
</div>
<div className="form-group col-md-2">
<label htmlFor="date">Date</label>
<select className="form-control" name="date" id="date" onChange={this.handleChange} value={this.state.date}>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-12">
<input id='formButton' className='btn btn-primary' type='submit' placeholder='Send' />
</div>
</div>
</form>
)
}
}
export { SearchForm }
The problem is input keywords
doesn't change its value when I'm typing.问题是输入keywords
在我键入时不会更改其值。 What's wrong?怎么了?
Make a common function for changing the state for input values.创建一个通用函数来更改输入值的状态。
handleInputChange(e) {
this.setState({
[e.target.name]: e.target.value
});
}
Make sure you mention name
in every input
tag.确保在每个input
标签中都提到name
。 eg:例如:
<input name="someUniqueName" value={this.state.someState} onChange={this.handleInputChange} />
React Hooks makes this so much easier!!! React Hooks 让这一切变得如此简单!!!
import React, {useState} from 'react'
function SearchForm () {
const [input, setInput] = useState("")
return (
<div className="SearchForm">
<input
value={input}
onChange={(e) => setInput(e.target.value)} />
</div>
)
}
It should be:它应该是:
this.setState({
keywords: e.target.value
});
Your handleKeywordsChange
function sets the state value
whereas you are using this.state.keywords
as value for input您的handleKeywordsChange
函数设置状态value
,而您使用this.state.keywords
作为输入值
handleKeywordsChange(e) {
console.log(1);
this.setState({
keywords: e.target.value
});
}
class InputKeywordCheck {
state = {
email: '',
}
handleInputChange (e) {
const {name, value } = e.target;
this.setState({[name]: value});
}
render() {
return (
<input name="email" value={this.state.email} onChange={this.handleInputChange} />
)
} }
I believe that you need to do something like this:我相信你需要做这样的事情:
handleKeyWordsChange (e) { this.setState({[e.target.name]: e.target.value}); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.