javascript - 如何将表单值获取到 react 中的状态对象中

Question

我正在尝试将表单值获取到对象中，但无法将表单中的值获取到地址对象中，

this.state = {
        address: {
            country: "",
            street: "",
            postcode: "",
            city: "",
        }
}


handle_form_input = ev => {
    debug("handle_form_input", ev)
    this.setState({
        [ev.target.name]: ev.target.value
    } as Form)
}

                   K(FormField, {
                        p, s,
                        type: "text",
                        name: "firstname",
                        onInput: this.handle_form_input
                   }),
                   K(FormField, {
                        p, s, type: "text", name: "country", onInput: this.handle_form_input
                    }),

                    K(FormField, {
                        p, s, type: "text", name: "street", onInput: this.handle_form_input
                    }),

                    K(FormField, {
                        p, s, type: "text", name: "plz", onInput: this.handle_form_input
                    }),

                    K(FormField, {
                        p, s, type: "text", name: "city", onInput: this.handle_form_input
                    }),

                    K("input", { type: "submit", hidden: true })

如有任何帮助，我们将不胜感激。

Answer 1

看起来您想要更改 state.address[ev.target.name] 而不仅仅是 state[ev.target.name]

handle_form_input = ev => {
  const { name, value } = ev.target;
  this.setState(prevState => {
    const address = { ...prevState.address };
    address[name] = value;
    return { address };
  });
};