Question

所以我从后端获取了一些数据

{"data":[{"status":1, "title":"Title 1"}, {"status":2, "title":"Title 2"}, {"status":1, "title":"Title 3"}, {"status":3, "title":"Title 4"}]}

它们将被映射到一个列表中，其中status的值确定了我在下面喜欢的3个单选按钮之一

{data.map(d => {
    return (
       <ListGroupItem>
          <Row>
            {d.title}
            <FormGroup>
            <Input
               type="radio"
               name={d.title}
               value="1"
               checked={d.status === 1}
               onChange={this.changeHandler}
             />
             Open
             </FormGroup>
             <FormGroup check inline>
                <Input
                  type="radio"
                  name={d.title}
                  value="2"
                  checked={d.status === 2}
                  onChange={this.changeHandler}
                />
                In-progress
              </FormGroup>
              <FormGroup check inline>
                 <Input
                    type="radio"
                    name={d.title}
                    value="3"
                    checked={d.status === 3}
                    onChange={this.changeHandler}
                 />
                 Closed
               </FormGroup>
           </Row>
        </ListGroupItem>
   );
})}

所以我的列表看起来像

Title 1      * open  0 in-progress  0 closed
Title 2      0 open  * in-progress  0 closed
Title 3      * open  0 in-progress  0 closed
Title 4      0 open  0 in-progress  * closed

（不是最好的显示方式）

现在，我需要以某种形式使用它，以便在提交时，选定的值将更新后端中的数据。我将如何去做？从现在起，即使选择单选按钮，我也将如何处理onChange事件，什么都不会改变。

changeHandler = e => {
   //map the data to the proper place
}

submitHandler = e => {
   //submit the data
}

P.S。我对React很陌生，所以这可能不是最好的方法。如果有更好的方法，请告诉我。

Answer 1

您的方法还可以，但是更改事件的处理方式不正确，因此状态不会更新。

首先，我想这就是状态的形状：

 List<AuthUI.IdpConfig> providers = Arrays.asList(
            new AuthUI.IdpConfig.EmailBuilder().build(),
            new AuthUI.IdpConfig.PhoneBuilder().build(),
            new AuthUI.IdpConfig.GoogleBuilder().build());
    startActivityForResult(AuthUI.getInstance().createSignInIntentBuilder()
            .setAvailableProviders(providers)
            .setIsSmartLockEnabled(false) // just added this line now it asks to sign in at every install 
            .build(), RC_SIGN_IN);

然后可以按以下方式更新状态（从Redux大量启发）

this.state = {
  data: [
    { title: "Title 1", status: 1 },
    { title: "Title 2", status: 2 },
    { title: "Title 3", status: 1 },
    { title: "Title 4", status: 3 }
  ]
};

最后，您可以在处理Submit事件时发送状态。

如何在反应中处理多组单选按钮？

1 个答案: