屏幕上仅显示最后一个输入值?

我在输入字段方面遇到问题。我有五个。当我填满所有内容并按下按钮以在屏幕上显示它们时,所有位置仅显示我输入的最后一个...(很难表达,请问您是否不明白)

这是我想要输出的时间:

´´´

{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});
    }

´´´

评论