用钩子反应 InputForm 值

Question

我对钩子有点陌生，我似乎无法让我的 FormControl 值在更改后正确显示它的值，该值在页面上保持不变。

但是我可以看到正在调用 customerNameChanged 并且正在正确更新客户对象的状态，但是 FormControl 上使用的值没有更新。

我不明白为什么，但我认为这是因为该值是一个对象的属性。谁能进一步解释一下？

export default function Customer(props) {

    const { match } = props;
    const [loading, setLoading] = useState(true);
    const [customer, setCustomer] = useState({});
    const [params] = useState(match.params);

    useEffect(() => {
        async function load() {
            const customer = await loadCustomer(params.id);
            setCustomer(customer.data);

            setLoading(false);
        }
        load();
    }, [])

    function customerNameChanged(event) {
        customer.name = event.target.value;
        setCustomer(customer);
    }

    function renderCustomer() {
        return (<div>
            <InputGroup className="mb-3">
                <InputGroup.Prepend>
                    <InputGroup.Text id="basic-addon1">Name</InputGroup.Text>
                </InputGroup.Prepend>
                <FormControl
                    placeholder="Name"
                    aria-label="CustomerName"
                    aria-describedby="basic-addon1"
                    value={customer.name}
                    onChange={customerNameChanged}
                />
            </InputGroup>
        </div>)
    }

    return (<Card><LoadedContent isLoading={loading} content={renderCustomer()} /></Card>)
}

Answer 1

这就是解决方案，感谢@Ibz 的回答！

function customerNameChanged(event) {
    setCustomer({ ...customer, name: event.target.value });
}

用钩子反应 InputForm 值

React InputForm Value With Hooks

reactjs

react-bootstrap

react-hooks