Как я могу получить значения из нескольких полей ввода при отправке формы и сохранить значения как объект в массиве состояний для React?

Question

Я пытаюсь создать форму, в которой я могу ввести три значения для игры (название, рейтинг и цена), сохранить эти значения при отправке и показать список внизу в таблице.Я новичок, чтобы реагировать, и я получил его с помощью ref, но я не уверен, что это лучшая практика.При поиске решения я видел, что многие люди используют onChange для сохранения состояния, поскольку оно печатается, даже когда есть кнопка отправки.Это то, что я сделал, но я не уверен, что это лучшая практика.Могу ли я получить отзыв?Спасибо!

класс Приложение расширяет Компонент {

state = {
    games: [{title:"Mario Kart", rating:7.4,price:"$45"}]        
};   

handleSubmitButton = (e) => {
    e.preventDefault();
    this.setState(prevState => ({
        games: [...prevState.games, {
        title: this.refs.title.value,
        rating: this.refs.rating.value,
        price: this.refs.price.value
        }] 
    }));
}

render () {
return (
<div>
 <form onSubmit={this.handleSubmitButton}>
    <label>
        Game Name
        <input type="text" id="name-input" ref="title"/>
    </label>
    <label>
        Rating
        <input type="text" id="ratings-input" ref="rating"/>
    </label>
    <label>
        Price
        <input type="text" id="price-input" ref="price"/>   
    </label>
    <button type="submit" id="submit-button">Submit</button>
 </form>
 <label>
    Search
    <input type="text" id="search-input"/>
 </label>
  <table id="directory-table">
    <tr>
        <th>Name</th>
        <th>Ratings</th>
        <th>Duration</th>
    </tr>
    {this.state.games.map(game => {
        return (
           <tr>
             <th>{game.title}</th>
             <th>{game.rating}</th>
             <th>{game.price}</th>
           </tr>
    )

    })}
    </table>
  </div>
);

}}

Answer 1

Попробуйте использовать контролируемый компонент в качестве входных данных, а также используйте деструктуризацию.Вы можете прочитать об управляемом компоненте здесь https://www.robinwieruch.de/react-controlled-components/, а также прочитать о списке и ключах, потому что вы допустили ошибку при отображении значений для печати строк таблицы https://reactjs.org/docs/lists-and-keys.html

Попробуйте следующий код

import React, { Component } from 'react';
import './App.css';
class App extends Component {
    state = {
        title: "",
        rating: "",
        price: "",
        games: [{ title: "Mario Kart", rating: 7.4, price: "$45" }]
    };

    handleSubmitButton = (e) => {

        e.preventDefault();
        const { title, rating, price } = this.state;
        this.setState(prevState => ({
            games: [...prevState.games, { title, rating, price }]
        }));
    }

    handleChange = (evt) => {
        console.log(evt.target)
        this.setState({ [evt.target.name]: evt.target.value });
    }

    render() {
        const { title, rating, price } = this.state
        return (
            <div>
                <form onSubmit={this.handleSubmitButton}>
                    <label>
                        Game Name
                      <input
                            type="text"
                            id="name-input"
                            name="title"
                            value={title}
                            onChange={(evt) => this.handleChange(evt)}
                        />
                    </label>
                    <label>
                        Rating
                    <input

                            type="text"
                            id="ratings-input"
                            name="rating"
                            value={rating}
                            onChange={(evt) => this.handleChange(evt)}
                        />
                    </label>
                    <label>
                        Price
                    <input
                            type="text"
                            id="price-input"
                            name="price"
                            value={price}
                            onChange={(evt) => this.handleChange(evt)}
                        />
                    </label>
                    <button type="submit" id="submit-button">Submit</button>
                </form>
                <label>
                    Search
                <input type="text"
                        id="search-input" />
                </label>
                <table id="directory-table">
                    <tbody>
                        <tr>
                            <th>Name</th>
                            <th>Ratings</th>
                            <th>Duration</th>
                        </tr>

                        {this.state.games.map((game,index) => {
                            return (
                                <tr key={index}>
                                    <th>{game.title}</th>
                                    <th>{game.rating}</th>
                                    <th>{game.price}</th>
                                </tr>
                            )

                        })}
                    </tbody>
                </table>
            </div>
        );
    }
}

export default App;

Answer 2

Я думаю, что, как вы упомянули, предпочтительным способом является использование onChange для обновления состояния для каждого контролируемого входа, а затем для установки значения входа в значение в вашем состоянии.Затем, нажав «Отправить», вы запускаете функцию, которая может проверять ваши входные данные перед отправкой значений в конечную точку.

В вашем примере вы можете установить логическое значение в своем состоянии, если каждый вход действителен, который вы используете какусловие в выходных данных вашей таблицы:

{this.state.formValid && this.state.games.map(games => ...

Один из способов достижения этого состоит в том, что вы можете использовать обработчик onChange для помещения текущего значения во временную ячейку состояния, скажем, ваш вход имеетидентификатор «title», затем используйте this.setState({ [event.target.id]: event.target.value }), затем в обработчике отправки создайте объект из временных значений, чтобы вставить его в массив игр и, наконец, очистить значения title, rating и price в состоянии?

Это немного дрянной пример того, что я имею в виду, хотя я сделал это с помощью хуков и имею некоторое повторение со значениями useState, которые можно было бы сделать лучше с помощью useReducer, например: https://codesandbox.io/s/peaceful-moore-jrjpg