为什么屏幕上只显示最后一个输入值？

Question

我的输入字段有问题。我得到了其中的五个。当我把它们全部填满并按下按钮显示在屏幕上时，所有地方都只显示我输入的最后一个......（这个很难表述，如果你不明白，请问你）

这是我想要输出的时候：

´´´

{this.state.new_array.map((char, i) => (
     <li key={i}>
        {`(${char.gender})
           ${char.name}
           ${char.height}
           ${char.eye_color}
           ${char.birth_year}`}
      </li>

))}

´´´

这是我的输入字段和按钮：

'''

<input  onChange={this.handleChange}></input>
<input  onChange={this.handleChange}></input>
<input  onChange={this.handleChange}></input>
<input  onChange={this.handleChange}></input>
<input  onChange={this.handleChange}></input>
<button onClick={this.addNewCharacter} }>Add character</button>

´´´

这是我连接到按钮和输入的函数：

´´´

 constructor(props){
        super(props);
        this.state = {
            new_array: [],
            nameFromInput: "",
            heightFromInput: "",
            birthyearFromInput: "",
            genderFromInput: "",
            eyecolorFromInput: ""
        }
    }

addNewCharacter = () => {
        this.setState(oldState => ({
            new_array: [...oldState.new_array, { // IM PRETTY SURE IT HAS TO DO WITH THIS FUCNTION?
                name: this.state.nameFromInput, 
                height: this.state.heightFromInput,
                birth_year: this.state.birthyearFromInput,
                gender: this.state.genderFromInput,
                eye_color: this.state.eyecolorFromInput
            }]
        }))
        this.setState({showFavorites: true})
    }

 handleChange = event => {
        this.setState({
            nameFromInput: event.target.value,
            heightFromInput: event.target.value,
            birthyearFromInput: event.target.value,
            genderFromInput: event.target.value,
            eyecolorFromInput: event.target.value});
    }

´´´

Answer 1

为什么要把简单的事情搞得这么复杂？

这是 Codesandbox https://codesandbox.io/s/serene-hodgkin-d5kz9?file=/src/App.js 中的一个工作示例

为简洁起见，在下面发布了解决方案：

import React from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      height: "",
      birthyear: "",
      gender: "",
      eyecolor: ""
    };
  }

  handleChange = event => {
    this.setState({
      name: event.target.value,
      height: event.target.value,
      birthyear: event.target.value,
      gender: event.target.value,
      eyecolor: event.target.value
    });
  };

  addNewCharacter = () => {
    const { name, height, birth_year, gender, eye_color } = this.state;
    this.setState({
      new_array: {
        name,
        height,
        birth_year,
        gender,
        eye_color
      },
      showFavorites: true
    });
    console.log(this.state);
  };

  render() {
    return (
      <div className="App">
        <input onChange={this.handleChange} />
        <input onChange={this.handleChange} />
        <input onChange={this.handleChange} />
        <input onChange={this.handleChange} />
        <input onChange={this.handleChange} />
        <button onClick={this.addNewCharacter}>Add character</button>
      </div>
    );
  }
}

Answer 2

每次您更改任何输入字段的值时，您都会调用this.handleChange，每次都是同一个函数，输入更改事件作​​为参数传递。

无论从哪个输入触发此事件，状态中的每个键都会使用来自该输入的值进行更新。

可能看起来更好一点的是：

generateHandleChange = key => event => {
  this.setState({[key]: event.target.value});
};

您的输入将如下所示：

<input onChange={this.generateHandleChange('name')} />
<input onChange={this.generateHandleChange('height')} />
<input onChange={this.generateHandleChange('birth_year')} />
<input onChange={this.generateHandleChange('gender')} />
<input onChange={this.generateHandleChange('eye_color')} />
<button onClick={this.addNewCharacter}>Add character</button>