使用ReactJS在数组中推送项

类Demo扩展了React.Component{ 建造师{ 超级的 此.state={ 清单：[“汽车”、“地图”、“房子”] } } 输入值{ var x=e.目标值； console.logx } 附加值{ this.state.list.push； this.setState{list:this.state.list}； } 渲染{ 回来 {this.state.list.mapitem=> {item} } 添加元素 } } ReactDOM.render , document.getElementById'test' 文本输入需要一个状态值，以便addValue函数知道在添加新项时使用什么。文本状态将使用用户键入的任何内容进行更新

工作演示：

---

另外，不要像这样直接进行状态突变。state.list.pushblah。这违反了React原则，可能导致不必要的视觉副作用。如果需要引用现有状态，请尝试创建它的副本。在您的列表中，我们使用扩展运算符创建一个浅拷贝，然后将新的项添加到数组中。

，因为反应都是关于小组件和可重用性的，把它分解成两个独立的组件…那样的话，如果你需要一个表单，你可以在其他地方重复使用它

这是您的演示：

class Demo extends Component {
    state = { list: ['car', 'map', 'house'] };

    addItem = item => {
        this.setState({ list: [item, ...this.state.list] });
    };

    render() {
        return (
            <div>
                <Form addItem={this.addItem} />
                {this.state.list.map((item, index) => (
                    <div key={index}>{item}</div>
                ))}
            </div>
        );
    }
}

以下是表格：

class Form extends Component {
    state = { item: '' };

    handleChange = event => {
        this.setState({ item: event.target.value });
    };

    handleSubmit = event => {
        event.preventDefault();
        this.props.addItem(this.state.item);
        this.setState({ item: '' });
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type='text'
                    value={this.state.item}
                    onChange={this.handleChange}
                />
            </form>
        );
    }
}

---

现场演示：

您好，请尝试下面的解决方案，如果有帮助，请告诉我：很高兴听到。快乐编码：

class Form extends Component {
    state = { item: '' };

    handleChange = event => {
        this.setState({ item: event.target.value });
    };

    handleSubmit = event => {
        event.preventDefault();
        this.props.addItem(this.state.item);
        this.setState({ item: '' });
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type='text'
                    value={this.state.item}
                    onChange={this.handleChange}
                />
            </form>
        );
    }
}