0

刚开始使用 React 并且在尝试更改 Textfield 以更新状态时遇到了一些麻烦。使用使用 useState 设置初始状态的功能组件。

我确定我只是错过了一些简单的东西......但最终放弃并寻求帮助。

这是功能组件的完整代码：

import React, { useState } from 'react';
import Step1 from '../Element/FormStep1';

const NewForm = () => {

  let [object, setObject] = useState({
    property: {
      entry: 'string'
    }
  });

  function handleChange(event) {
    const {name, value} = event.target;
    setObject({
      ...object,
      [name]: value
    })
    console.log(object)
  };

  return (      
    <form>     
        <Step1 
          handleChange={handleChange}
          object={object}
        />                        
    </form>
  );
}

export default NewForm

对于表单组件：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import t from 'typy'

export default function Step1(props) {

  return(
    <React.Fragment>
      <TextField
        name={t(props.object, 'property.entry').safeObject}
        type='text'
        onChange={props.handleChange}
      />
    </React.Fragment>
  );
}

当 handleChange 函数运行时，它不会替换目标属性，而是创建一个以原始值作为名称的新属性，即

object {
  property: {
    entry: 'string'
  },
  string: value //Text input
}

目的是用文本输入替换值“字符串”。

 object {
   property: {
     entry: 'value' //Text input 
   }
 }
4

3 回答 3

0

您的对象将在下一次渲染中更改。

function handleChange(event) {
    const {name, value} = event.target;
    const newObject = {
      ...object,
      [name]: value
    } 
    setObject(newObject)
    console.log('newObject', newObject)
    console.log('currentObject', object)
  };

新对象！=对象

于 2020-10-26T15:30:14.213 回答
0

因此，经过一番睡眠和更多的在线研究，我设法弄清楚了这一点。使用 lodash 的 set 方法是可行的方法。因此，需要对我的 Textfield 上的 name 属性进行细微更改：

<TextField
  name='property.value'
  type='text'
  onChange={props.handleChange}
/>

在我的函数组件文件中导入set后，import { set } from 'lodash';我可以修改handleChange函数如下：

function handleChange(event) {
  const {name, value} = event.target;
  set(object, name, value)
  console.log(object) // to see that it worked in the console. 
}

这现在按预期工作（经过几个小时的挫折）

注意......这是我实际找到答案的地方：

https://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937

于 2020-02-12T03:27:12.583 回答
0

如果你想拥有一个具有 value 属性的对象，你应该添加{}.

你应该改变

setObject({
  ...object,
  [name]: value
})

至

setObject({
  ...object,
  [name]: { value } // added { }
})
于 2020-02-11T15:10:06.607 回答