响应更改输入值 onChange [英] React change input value onChange

查看：94
本文介绍了响应更改输入值 onChange的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的SearchForm.js，handleKeywordsChange 必须处理输入的keywords 变化

从'react'导入React；从 'react-dom' 导入 ReactDOM；class SearchForm 扩展 React.Component {构造函数(道具){超级(道具)this.state = {关键词:'',城市: ''，日期: ''}//this.handleChange = this.handleChange.bind(this)//this.handleSubmit = this.handleSubmit.bind(this)this.handleKeywordsChange = this.handleKeywordsChange.bind(this);}handleKeywordsChange(e) {控制台日志(1)；this.setState({价值:e.target.value});}使成为() {返回 (<form className='form search-form' onSubmit={this.handleSubmit}><div className="form-row"><div className="form-group col-md-5"><label htmlFor="keywords">关键字</label><input type="text" className="form-control" name="keywords" id="keywords" placeholder="Keywords" onChange={this.handleKeywordsChange} value={this.state.keywords}/>

<div className="form-group col-md-5"><label htmlFor="city">城市</label><input type="text" className="form-control" name="city" id="city" placeholder="City" onChange={this.handleChange} value={this.state.city}/>

<div className="form-group col-md-2"><label htmlFor="date">日期</label><select className="form-control" name="date" id="date" onChange={this.handleChange} value={this.state.date}><option>1</option><option>2</option><选项>3</选项><选项>4</选项><option>5</option></选择>

<div className="form-row"><div className="form-group col-md-12"><input id='formButton' className='btn btn-primary' type='submit' placeholder='Send'/>

</表单>)}}导出 { SearchForm }

问题是输入 keywords 在我打字时没有改变它的值.怎么了?

解决方案

制作一个通用函数来改变输入值的状态.

handleInputChange(e) {this.setState({[e.target.name]: e.target.value});}

确保在每个 input 标签中提及 name.例如:

This is my SearchForm.js, handleKeywordsChange must handle input keywords changes

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. 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. e.g: 

<input name="someUniqueName" value={this.state.someState} onChange={this.handleInputChange} />

这篇关于响应更改输入值 onChange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆