ReactJS：表单值不带值

Posted 2023-03-23

【中文标题】ReactJS：表单值不带值

【英文标题】：ReactJS: Form values doesn't take values

【发布时间】：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 的值。

我该如何解决？谢谢。

【参考方案1】：

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

const RuoliChoosen = ruolo => 

这不是一个组件，而是

const RuoliChoosen = ( ruolo ) => 

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

【讨论】：

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

【参考方案2】：

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

来自

const RuoliChoosen = ruolo => 
   return()

到

const RuoliChoosen = (ruolo) => 
       return()
    

谢谢。