reactjs - React setState 在提交输入表单后不更新状态

Question

我是 React 的新手，想开发简单的应用程序 - 有一个输入字段，我想从中获取值和渲染列表。在文本字段中添加选项后，我想用新选项更新此列表。setState 函数不起作用，我不知道如何连接输入提交和列表渲染。我的代码如下。

WaterApp.js

    import React from 'react';
    import AddWater from './AddWater';
    import WaterElements from './WaterElements';

    export default class WaterApp extends React.Component {
        state = {
            quantities: ['aaaaa', 'bbbbb', 'ccccc']
        };

handleAddQuantity = (quantity) => {
    this.setState(() => ({
        quantities: ['ddddd', 'eeeee']
    }));
    console.log('works');
}
render() {
    return (
        <div>
            <WaterElements quantities={this.state.quantities} />
            <AddWater handleAddQuantity={this.handleAddQuantity} />
        </div>
    )
}
    }

AddWater.js

    import React from 'react';

    export default class AddWater extends React.Component {
        handleAddQuantity = (e) => {
            e.preventDefault();
            const quantity = e.target.elements.quantity.value;
            console.log(quantity);
};
render() {
    return (
        <form onSubmit={this.handleAddQuantity}>
            <input type="text" name="quantity" />
            <input type="submit" value="Submit" />
        </form>
    )            
}
    }

水元素.js

    import React from 'react';

    const WaterElements = (props) => (
<div>
    <p>Water Quantity:</p>
    {
        props.quantities.map((quantity) => 
            <p key={quantity}>{quantity}</p>
        )
    }
</div>
    );

    export default WaterElements;

我希望 list 是 ddddd, eeeee 在这一刻。

标签： reactjs

Answer 1

你从不打电话props.handleAddQuantity

export default class AddWater extends React.Component {
    handleAddQuantity = (e) => {
        e.preventDefault();
        const quantity = e.target.elements.quantity.value;
        props.handleAddQuantity(quantity)
};
render() {
    return (
        <form onSubmit={this.handleAddQuantity}>
            <input type="text" name="quantity" />
            <input type="submit" value="Submit" />
        </form>
    )            
}