如何在 React 中的可重用组件上操作对象属性

Question

我在调查问卷的很多输入部分使用 MUIs 输入字段，并想将其保存到我的状态变量中，该变量是一个包含我所有表单值的对象。如何在可重复使用的 MUI 组件中操作我的 formData 对象？

我目前将 formData 作为 prop 传递给组件，但我不确定如何在组件内部使用 setFormData，因为每次我使用它时它都会不同属性。

我认为每个问题都是状态对象 formData 的属性，所以它看起来像

formData{question1: 'foo', question2: 'bar'}

这是表格目前的样子（我不介意更改结构，如果这样做有意义的话

看一下表单上的InputField（我也附上了组件代码）

<QuestionLabel>Do you have a "Nickname":</QuestionLabel>
<InputField value={props.formData.nickname}/>

<QuestionLabel>Preferred Language:</QuestionLabel>
<InputField value={props.formData.language}/>

<QuestionLabel>Occupation:</QuestionLabel>
<InputField value={props.formData.occupation}/>

这是组件的外观（我知道我必须更改它）

export default function InputField(props){
    return(
        <TextField
        fullWidth
        value={props.value}
            variant='standard'    
        />
    )
}

免责声明 首先post很抱歉，如果格式不完美或者我以不方便的方式附加了代码片段，如果是这样的话请给我一些指示

Answer 1

由于在 React 中没有双向绑定，使用受控组件处理表单输入的正常方法是每次更改时从特定的 dom 元素中提取文本。我们使用 event.target.value 提取数据来执行此操作，但是我们如何在可重用组件中将其正确添加到您的状态？

为此，我们希望将名称标签添加到输入字段，然后在将值添加到我们的状态时使用它。如您正确所述，formData.someName = 'some text' 我们在 changeHandler 函数中更新我们的状态，该函数在每次输入更改时更新我们的状态。

例如，假设我们将 setFormData、formData 和 fieldName 传递给道具：

export default function InputField(props){
    const {setFormData, formData, fieldName} = props //destructure the props

   const changeHandler = (event) => {
       // updates the formData state of formData.name to equal event.target.value
       setFormData({...formData, [event.target.name]: event.target.value})
   }

    return(
        <TextField
        fullWidth
        name={fieldName}
        value={formdata.fieldName}
        onChange={changeHandler}
        variant='standard'    
        />
    )
}

使用上面的组件看起来像这样：

<InputField setFormData={setFormData} formData={formData} fieldName="question1">

Answer 2

通过将属性传递到需要更改的组件中，我能够让它工作；这是我在文本字段组件上的 handleChange 函数：

const handleChange = (event) => {
    var formData = {...props.formData}
    formData[props.property] = event.target.formData
    props.onChange(formData)
}

如何在 React 中的可重用组件上操作对象属性

How to manipulate object property on a reusable component in React

javascript

reactjs

react-component

react-hooks

如何在 React 中的可重用组件上操作对象 属性

How to manipulate object property on a reusable component in React

javascript

reactjs

react-component

react-hooks

如何在 React 中的可重用组件上操作对象属性