Question

解决

我使用甜蜜警报库进行自定义提示（swal）。问题是，如果你想渲染一个react组件，他们会要求你渲染它并提供一个节点，这给我带来了一些问题。

我有一个呈现的组件列表。每个组件都有一个编辑按钮。当你编辑并按下确定时，会弹出甜蜜的响铃，并且它应该包含复选框，供用户指定一些选项。

问题是：

第一次，我得到默认值true false。但是假设：当swal弹出，按下进入，编辑另一个东西时，用户标记所有复选框。弹出打开标记所有复选框，但实际数据是默认值[true，false]。我理解为什么会这样，但我无法弄清楚如何解决它。

有人可以解释你会如何反应吗？我喜欢这样或者每次打开默认值弹出窗口或者根据该组件的状态保存实际数据。

代码：

class TimeAddOptions extends React.Component {
  state = {
    moveTime: true,
    deleteTime: false,
  };

  changeMoveTime = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({
      moveTime: e.currentTarget.checked,
    });
    swal.setActionValue({
      confirm: { value: [e.currentTarget.checked, this.state.deleteTime] },
    });
  };

  changeDeleteTime = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({
      deleteTime: e.currentTarget.checked,
    });
    swal.setActionValue({
      confirm: { value: [this.state.moveTime, e.currentTarget.checked] },
    });
  };

  render(): JSX.Element {
    return (
      <div>
        <label>
          Add this task`s time to the new project
          <input
            type="checkbox"
            checked={this.state.moveTime}
            value={this.state.moveTime}
            onChange={this.changeMoveTime}
          />
        </label>
        <label>
          Subtract this task`s time from this project
          <input
            type="checkbox"
            checked={this.state.deleteTime}
            value={this.state.deleteTime}
            onChange={this.changeDeleteTime}
          />
        </label>
      </div>
    );
  }
}

const wrapper = document.createElement('div');
ReactDOM.render(<TimeAddOptions />, wrapper);

export default wrapper.firstChild;


 // and this is how I call swal
swal({
        text: "You changing project's task. Read the options",
        content: TimeAddOptionsNode,
        buttons: {
          confirm: {
            value: { value: [true, false] },
          },
        },
      }).then(value => {
        this.props.handleRename({
          moveTime: value.value[0],
          deleteTime: value.value[1],
        });

      });

Answer 1

我修好了。我做了什么，在父组件中设置状态，并将该状态和状态更改函数作为props传递给调用swal的组件，并在那里跟踪复选框值。每次按下OK，我都会改变那种状态。最好看一下代码，我想我解释得很差。

codesandbox处的链接作为解决方案的示例。

带有状态反应成分的甜蜜警报？

1 个答案: