reactjs - 如何在 react 中处理多组单选按钮？

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
}

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

Answer 1

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

起初，我想这是状态的形状:

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

然后状态可以更新如下(很大程度上受 Redux 启发)

handleChange = (event) => {
  this.setState({
    // the map method doesn't mutate the original array, it returns a new one
    data: this.state.data.map(item => {
      // iterate through the array to find the right item to update
      if (item.title !== event.target.name) {
        // not match, so we won't change anything here
        return item;
      } else {
        // match, we return the updated value
        return {
          title: item.title,
          // event.target.value is a string, but the state uses number so we have to convert it
          status: Number(event.target.value)
        };
      }
    })
  });
}

最后，你可以在处理提交事件时发送状态。