当您点击输入字段或关注它时,我正在尝试在输入字段的父级上切换类。我面临两个问题。首先,为什么我的onFocus在没有我甚至点击字段内部的情况下调用渲染?其次,我是否需要为每个输入字段单独使用isActive状态,还是有更好的方法?我问,因为我的表单可能有更多的输入字段。我需要一个状态来为每个人捕获价值。这是否意味着每个输入需要两个状态?
export default class ContactForm extends Component {
constructor(props) {
super(props);
this.state = {
isActive: false
}
onFocus(e) {
console.log(e);
// setState for each input field here.
}
render() {
return (
<div className="contact-form">
<h2>Contact Form</h2>
<form>
<div className={isActive ? 'textfield is-focused': 'textfield'}>
<label htmlFor="inputName">Name</label>
<input type="text"
id="inputName
ref="_name"
onFocus={this.onFocus('name')}
/>
</div>
<div className={isActive ? 'textfield is-focused': 'textfield'}>
<label htmlFor="inputEmail">Email</label>
<input type="email"
id="inputEmail"
ref="_email"
onFocus={this.onFocus('email')} />
</div>
<input type="submit" value="send message" />
</form>
</div>
);
}
}
答案 0 :(得分:1)
要先回答第二个问题,它会立即渲染,因为您需要将方法绑定到this
- 所以您的代码看起来就像这样。
<input type="text"
id="inputName
ref="_name"
onFocus={this.onFocus('name').bind(this)}
/>
或者,您可以将它放在构造函数中,这通常更清晰。
export default class ContactForm extends Component {
constructor(props) {
super(props);
this.state = {
isActive: false
}
this.onFocus = this.onFocus.bind(this);
}
要回答你的第一个问题,是的,你现在设置它的方式,你必须为每个输入都有一个单独的布尔值。有更好的方法,只需尝试使用CSS。
答案 1 :(得分:1)
首先,如果您不想在渲染上调用onFocus:
onFocus={() => this.onFocus('email')}