Question

我对React非常陌生。我正在尝试制作可重用的Checkbox组件。这些复选框用于将信息发送到API。我在GET上有一个App.JS命令来设置状态。

这是我的API的简化版本

{
 "devices":[
   {
    "id":1,
    "valveA": true,
    "valveB": false,
    "valveC": true,
   },
   {
    "id":2,
    "valveA": false,
    "valveB": true,
    "valveC": false,
   }

 ]
}

我像这样将道具传递给孩子们

render() {
    const {devices} = this.state;
    return (       
          <div >
            {devices.map(device => (
              <Device device={device} key={device.id} />
            ))}
          </div>     
    );

我可以为每个复选框设置单独的组件，并通过设置单独的状态来设置checked状态，例如：

 state = { checked: this.props.device.valveA }

但这意味着我必须为我的API中的每个“阀门”制造一个组件。理想情况下，我希望有一个Checkbox组件，可以将其用于所有“阀门”。

我通过将阀门名称指定为道具来制作了一个半工作部件：

<Device device={device} key={device.id} switchFor="valveA" />

这是我的组件，已成功将更改传递给API，但是我需要动态设置setState的最后一部分

this.props.device.{{{I WANT THIS TO BE DYNAMIC}}}

，否则所有开关只会获得ValveA的状态：

state = { checked: false };

  componentDidMount(){

    this.setState({ checked: this.props.device.valveStatus })
  }


  handleCheckboxChange = event => {
    const type = this.props.switchFor;

    const checkedStatus = event.target.checked;

    const deviceID = this.props.device.id;

    const obj = {};
    obj[type] = checkedStatus;

    this.setState({ checked: checkedStatus });

    axios
      .patch(`http://localhost:3001/devices/${deviceID}`, obj)
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  };

  render() {
    const { device } = this.props;
    const theFor = this.props.switchFor + device.id;
    return (
      <div className="custom-control custom-switch">
        <input
          type="checkbox"
          className="custom-control-input"
          id={theFor}
          checked={this.state.checked}
          onChange={this.handleCheckboxChange}
        />
        <label className="custom-control-label" htmlFor={theFor}>
          toggle
        </label>
      </div>
    );
  }

很抱歉，如果我的代码有点简陋，我对React还是很陌生。

我不确定我是否朝着正确的方向前进，所以我感觉有一种更简单的方法可以实现这一目标。

Answer 1

您的解释还不是很清楚，但是我想我可以理解您正在尝试做什么。如果我错了，那就别理我。因此，似乎您希望能够更改组件要显示的设备对象的哪个阀门/开关。如果是这样，只需将其设置为状态即可。我可以想到的是，使用一个可以镜像“设备”数组的数组：

this.state = {
    "devices":[
       {
        "id":1,
        "valveA": true,
        "valveB": false,
        "valveC": true,
       },
       {
        "id":2,
        "valveA": false,
        "valveB": true,
        "valveC": false,
       }
    ],
    "selectedValve": ["valveA", "valveB"]
}

然后在渲染设备组件时，只需执行以下操作：

render() {
    const {devices} = this.state;
    return (       
          <div >
            {devices.map((device, ind) => (
              <Device device={device} key={device.id} switchFor={this.state.selectedValve[ind]} />
            ))}
          </div>     
    );
}

要更改特定设备的阀门，您可以：

handleSwitchChange(deviceInd, newValve){
    let copySelectedValve = [...this.state.selectedValve];
    copySelectedValve[deviceInd] = newValve;

    this.setState({
        selectedValve: copySelectedValve;
    })
}

要将第一个设备更改为valveB，只需执行handleSwitchChange（（0，“ valveB”）; 要更改设备阀门的正确/错误，您可以编写如下内容：

在ReactJS中通过props设置状态时，是否可以使用变量作为值的一部分？

1 个答案: