Массив входных данных в динамической форме React - PullRequest
Новая
       5

Массив входных данных в динамической форме React

0 голосов
/ 06 ноября 2018

Я все еще новичок, чтобы реагировать, поэтому, возможно, я не объясняю достаточно хорошо, но я благодарен за вашу помощь.

Я делаю страницу заказа для товаров, которые я получаю из базы данных, как вы видите ниже. ** Предметы намного длиннее этого.

введите описание изображения здесь 

Моя проблема в том, что я не могу установить значение в форме ввода. и я думаю, что по этой причине я не могу установить начальное состояние .. когда я пишу значение следующим образом: я получаю значение = "[объект объекта]".

введите описание изображения здесь 

            <input 
                type="number" 
                className="form-control"
                name={itemID}
                id={itemID}
                value={this.state.posts }
                onChange={this.handleChange} 
            />

Мне нужно установить начальное состояние, чтобы оно было массивом каждого элемента из базы данных. 

state = {posts: [{post:""}]}

Вот мой код: src / components / ItemForm 

            import React from "react";
            import { connect } from "react-redux";
            import { fetchAllPosts } from '../actions/index';

            class OrderSauceForm extends React.Component {
            componentDidMount() {
                this.props.dispatch(fetchAllPosts());
            }

            state = {posts: []}

            handleChange = (e) => {
                this.setState({ [e.target.name]: e.target.value })
            }
            handleSubmit = (e) => {
                e.preventDefault() 
            console.log(this.state);
            }


            render() {
                const { posts } = this.props;
                //console.log(posts.data);
                if(!posts.data){
                    return( <h2>Something went wrong.</h2>);
                }
                return (
                    <div >
                    <form onSubmit={this.handleSubmit}  >
                            <table className="table">
                                <thead>
                                    <tr>
                                        <th><strong>Item Name</strong></th>
                                        <th><strong>Quantity</strong></th>  
                                    </tr>
                                </thead>
                                <tbody>
                                {
                                    posts.data.map((post,idx) => {
                                        let itemID = `item-${post.id}`
                                    return (
                                        <tr key={post.id}>
                                    <td>{post.name}</td>
                                    <td>
                                        <input 
                                        type="number" 
                                        className="form-control"
                                        name={itemID}
                                        id={itemID}
                                        value={this.state.posts}
                                        onChange={this.handleChange} 
                                        className="item"
                                        />
                                    </td>
                                    </tr>
                                    )
                                    })
                                }
                                </tbody>
                                </table>
                                <div className="form-group">
                                    <button>submit</button>
                                </div>
                        </form>   
                    </div>
                );
            }
            }

            const mapStateToProps = (state) => {
            return {
                    posts: state.posts
                };
            };

            export default connect(mapStateToProps)(OrderSauceForm);

1 Ответ

0 голосов
/ 07 ноября 2018

Если this.state.posts - ваши начальные значения, попробуйте что-то вроде этого 

value={this.state.posts[idx].someValue}
...