ReactJS：表单值不接受值

Question

我有一个表单，当它被提交时，我使用函数 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 的值。

我该如何解决？谢谢。

Answer 1

编码时请格式化好你的代码，因为通常格式跟得上你的逻辑。有时人们对格式很挑剔，但实际上他们所说的是他们阅读您的代码并不舒服。相信我，您不想因为阅读代码而感到不舒服 ;)

const RuoliChoosen = ruolo => {

这不是组件，而是

const RuoliChoosen = ({ ruolo }) => {

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

Answer 2

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

来自

const RuoliChoosen = ruolo => {
   return()
}

至

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

谢谢。

ReactJS：表单值不接受值

ReactJS: Form values doesn't take values

javascript

reactjs

reactstrap