Question

我还是很陌生，所以我可能解释得不够好，但感谢您的帮助。

我正在为要从数据库中获取列表的商品创建订购页面，如下所示。 **物品比这更长。

我的问题是我无法在表单输入中设置值。并且我认为出于这个原因我无法设置初始状态..当我按如下方式编写value时：我得到value =“ [object object]”。

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

Answer 1

如果this.state.posts是您的初始值，请尝试执行以下操作

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

React动态形式的输入数组

1 个答案: