反应改变输入值 onChange答案

【问题标题】：React change input value onChange反应改变输入值 onChange
【发布时间】：2018-03-19 11:50:15
【问题描述】：

这是我的 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 }

问题是输入 keywords 在我输入时不会改变它的值。怎么了？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

确保在每个 input 标记中提及 name。例如：

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

【讨论】：

在你传递给setState()的对象中，为什么key是一个包含单个值的数组？为什么不this.setState( { e.target.name: e.target.value} )
@Ungeheuer Key 不是数组，而是计算出来的属性名。

【解决方案2】：

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

}

【讨论】：

【解决方案3】：

应该是：

this.setState({
    keywords: e.target.value
});

【讨论】：

【解决方案4】：

您的 handleKeywordsChange 函数设置状态 value 而您使用 this.state.keywords 作为输入值

handleKeywordsChange(e) {
    console.log(1);

    this.setState({
      keywords: e.target.value
    });
}

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我相信你需要这样做：

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

【讨论】：