反应：输入值未在表单中定义答案

【问题标题】：React: input value not defined in form反应：输入值未在表单中定义
【发布时间】：2021-04-28 22:18:12
【问题描述】：

我正在尝试制作一个将提交给我的 API 的表单。但是，在添加一些嵌套键后，它表示该值未定义。同样仅对于调用嵌套键的表单输入，我无法在输入字段中键入任何文本。我有一个 onChange 处理程序，因此应该允许输入文本。

相关代码如下。我的问题源于“地址：{...}”键。

任何想法将不胜感激！

const [formState, setFormState] = useState({
    photo: '',
    address: {
        street: '',
        city: '',
        state: '',
        zip: '',
    },
    price: '',
    sqft: '',
    bed: '',
    bath: '',
    additionalDetails: {
        ac: false,
        laundry: false,
        garage: false,
        offStreetParking: false,
        fireplace: false,
        pool: false,
        hardwoodFloors: false,
        sewer: false,
        schoolsNearby: false,
        parksNearby: false,
    }
});

function handleChange(event) {
    setFormState(prevState => ({
        ...prevState,
        [event.target.name]: event.target.value
    }));
};

async function handleSubmit(event) {
    try {
        event.preventDefault();

        setFormState(event);
        await createListing(formState);
        props.history.push('/dashboard');
        props.refresh();
    } catch (error) {
        alert(error.message);
    };
};

return(
    <div>
        <div className={styles.CreateListingHeader} >
            <h1>C R E A T E &nbsp; A &nbsp; L I S T I N G</h1>
        </div>
        <div className={styles.CreateListingMain}>
            <div className={styles.CreateFormMain}>
                <form className={styles.CreateListingForm} onSubmit={handleSubmit}>
                    <div className={styles.CreateFormItem}>
                        <input
                            className={styles.CreateFormInput}
                            value={formState.photo}
                            onChange={handleChange}
                            type='text' 
                            name='photo' 
                            placeholder=' P H O T O &nbsp; L I N K'
                        />
                    </div>
                    <div className={styles.CreateFormItem}>
                        <div className={styles.CreateFormAddressItem}>
                            <input 
                                className={styles.CreateFormInput}
                                value={formState.address.street}
                                onChange={handleChange}
                                type='text' 
                                name='street' 
                                placeholder=' S T R E E T'
                            />
                            <input
                                className={styles.CreateFormInput}
                                value={formState.address.city}
                                onChange={handleChange}
                                type='text' 
                                name='city' 
                                placeholder=' C I T Y'
                            />
                            <input
                                className={styles.CreateFormInput}
                                value={formState.address.state}
                                onChange={handleChange}
                                type='text' 
                                name='state' 
                                placeholder=' S T A T E'
                            />
                            <input
                                className={styles.CreateFormInput}
                                value={formState.address.zip}
                                onChange={handleChange}
                                type='text' 
                                name='zip' 
                                placeholder=' Z I P'
                            />
                        </div>

// ...

【问题讨论】：

标签： javascript node.js reactjs mongoose

【解决方案1】：

你也可以用下面的方法试试handleChange函数。只需通过指定 [event.target.name] 及其值，获取 fromState 变量数据并使用更新的属性名称将其传播到 setFormState 中，它将更新您的状态。

function handleChange(event) {
    setFormState({
           ...formState,
        [event.target.name]: event.target.value
    });
};

【讨论】：

【解决方案2】：

您可以为嵌套字段设置输入元素的名称，例如“address.street”，而不是“street”。

<input 
  className={styles.CreateFormInput}
  value={formState.address.street}
  onChange={handleChange}
  type='text' 
  name='address.street' 
  placeholder=' S T R E E T'
/>

然后在handleChange()中使用lodash函数

import _ from 'lodash';

...

function handleChange(event) {
  const newFormState = _.cloneDeep(formState)
  _.set(newFormState, event.target.name, event.target.value)
  setFormState(newFormState);
};

【讨论】：