React表单submit函数无法获取输入框值，提交后无内容渲染怎么办

• 第一个错误：handleSubmit 回调中直接取 event.target.value，这里的 event.target 指向的是 <form> 表单元素本身，表单元素没有 value 属性，所以拿到的是 undefined，赋值给 state.city 自然渲染不出内容。
• 第二个错误：输入框的自定义属性 city="city_name" 没有实际作用，既没有将输入框设为受控组件同步值到state，也没有加正确的标识方便提交时从表单中取值。

下面提供两种可直接运行的修复方式：

方案1：非受控组件（改动最小） #

import React from 'react';
import { Component } from 'react';

class App extends Component {
    constructor (props) {
        super(props)
        this.state = {
            city : ""
        }
          
    }
        
    handleSubmit = (event)=> {
        event.preventDefault();
        // 通过表单的elements属性取对应name的输入框值
        this.setState ({
          city : event.target.city_name.value 
        })
    }
     
    render () {
        return (
         <div>
            <form onSubmit={this.handleSubmit}>
             {/* 把自定义的city属性改为标准name属性，方便表单获取元素 */}
             <input type="text" name="city_name" />
             <button type="submit">Get Weather</button>
             {this.state.city}
             </form>
         </div>
        )
    }
}

export default App;

方案2：受控组件（更符合React常用写法） #

import React from 'react';
import { Component } from 'react';

class App extends Component {
    constructor (props) {
        super(props)
        this.state = {
            city : "",
            inputValue: "" // 存储输入框实时输入值
        }
          
    }
    // 同步输入框的值到state
    handleInputChange = (e) => {
        this.setState({
            inputValue: e.target.value
        })
    }
        
    handleSubmit = (event)=> {
        event.preventDefault();
        // 提交时直接取已经同步好的输入值
        this.setState ({
          city : this.state.inputValue
        })
    }
     
    render () {
        return (
         <div>
            <form onSubmit={this.handleSubmit}>
             {/* 绑定value和onChange变为受控组件 */}
             <input type="text" value={this.state.inputValue} onChange={this.handleInputChange} />
             <button type="submit">Get Weather</button>
             {this.state.city}
             </form>
         </div>
        )
    }
}

export default App;

内容的提问来源于stack exchange，提问作者Yoqubxon Xamidoff