javascript - 有没有一种简单的方法可以将 e.target.name 以外的所有其他状态设置为 false？

Question

真正的问题 - 我想点击链接。之后链接失效了-

<li className={this.state.selectedState === "jobs" ? "nav-item active" : "nav-item"}> <Link to = {{type: "JOBLIST", payload : { id : this.props.company_id, status : "active" }}} className="nav-link" name = "jobs" onClick ={this.onclick1}>JOBS</Link> </li>

这是我组件的构造函数:

constructor(props) {
    super(props);
    this.state = {
        a: true,
        b: false,
        c: false,
        d: false
    }
}

这些是链接，如果我点击其中任何一个，它会触发 onclick1 函数。

<a href="#" name="a" onClick={this.onclick1} > a </a>
<a href="#" name="b" onClick={this.onclick1} > b </a>
<a href="#" name="c" onClick={this.onclick1} > c </a>
<a href="#" name="d" onClick={this.onclick1} > d </a>

所以这个onclick1会将target对应的state设置为true。 ** 但我想将所有其他状态设置为 false，除了选定的标签。有没有更简单的方法来做 other then if else if else if else 语句？**

onclick1 = (e) => {
    e.preventDefault();
    console.log("name header" + e.target.name)
    let value = true;
    this.setState({ [name]: value })
}

Answer 1

我建议为此使用一些 initialState 变量。例如:

const initialState = {
  a: false,
  b: false,
  c: false,
  d: false,
};

class Component extends React.Component {
  constructor(props) {
    super(props);

    this.state = { ...initialState };
  }

  onClick(e) {
    this.setState({
      ...initialState,
      [e.target.name]: true,
    });
  }
}

因此在您的点击处理程序中，您只需设置初始状态并仅将单个键的值设置为 true