ReactJS：表单值不带值答案

【问题标题】：ReactJS: Form values doesn't take valuesReactJS：表单值不带值
【发布时间】：2021-11-12 08:13:34
【问题描述】：

我有一个表单，当它被提交时，我使用函数 saveEntity 获取值。

现在在这个表单中，我有一些字段是在选择其他一些值之后显示的。从这些字段中，我的 saveEntity 函数没有收到任何值。

export const MyFunctionName = (props) => {
   // code...    
   const saveEntity = (event, errors, values) => {
   console.log('values ', values);
   // other code
}


const RuoliChoosen = ruolo => {
    if (!ruolo.ruolo) {
      return <div />;
    }

    return (
      <div>
        <Row>
          <Col md="6">
            <AvGroup>
              <Label for="accessNumber">{'Access Number'}</Label>
              <AvInput
                id="accessNumber"
                data-cy="accessNumber"
                type="text"
                className="form-control"
                name="accessNumber"
              />
            </AvGroup>
          </Col>

             //.....
}

return(
            <AvForm model={isNew ? {} : userClientAuthorityEntity} onSubmit={saveEntity}>
               <AvInput
                  id="user-client-authority-application"
                  data-cy="application"
                  type="select"
                  className="form-control"
                  name="applicationId"
                  onChange={handleChange}
                  required
                >
                  <option value="" key="0">
                   Select Application
                  </option>
                  {applicationList
                    ? applicationList.map(value => {
                        return (
                          <option value={value.appCod} key={value.appCod}>
                            {value.appDesapplicazione}
                          </option>
                        );
                      })
                    : null}
                </AvInput>
   // this RuoliChoosen receive "ruoli" from another function (it works)
              <RuoliChoosen ruolo={ruoli} />
    )}

当我提交表单时，我希望看到 saveEntity 中的值，在这种情况下只有 application 和 accessNumber 的值，但我只收到 application 的值。

我该如何解决？谢谢。

【问题讨论】：

标签： javascript reactjs reactstrap

【解决方案1】：

编码时请妥善格式化您的代码，因为通常格式符合您的逻辑。有时人们对格式很挑剔，但实际上他们所说的是他们不习惯阅读您的代码。相信我，你不想因为阅读代码而感到不舒服；）

const RuoliChoosen = ruolo => {

这不是一个组件，而是

const RuoliChoosen = ({ ruolo }) => {

因为ruolo是一个道具，而不是整个props

【讨论】：

哦，你说得对，我在 VSCode 上使用更漂亮，它为我格式化代码 :D 谢谢，你发现了错误:)

【解决方案2】：

您将 ruolo 作为调用组件的道具发送。但是你把它作为一个对象发送。然后在你接收这个 ruolo 作为道具的那个组件中，它作为一个对象出现。如果你想访问它，你必须解构它。所以改变它。

来自

const RuoliChoosen = ruolo => {
   return()
}

到

const RuoliChoosen = ({ruolo}) => {
       return()
    }

谢谢。

【讨论】：