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会将与目标对应的状态设置为true。 **但是我想将除选定标签之外的所有其他状态设置为false。还有其他更简单的方法，如果不是if else 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

Answer 2

您可以执行以下操作：

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: '',
    };
    this.links = { 'a': false, 'b': false, 'c': false, 'd': false },      
  }

  onclick = (e) => {
    e.preventDefault();
    console.log("name header" + e.target.name)
    this.links = {
      ...this.links,
      [`${this.state.selected}`]: false,
    };
    this.setState({
      selected: e.target.name,
    });
  }

  render() {
   return (
     <div>
       {
         Object.keys(this.links).map(key => {
           return <a href="#" name={key} onClick={this.onclick1} >{key} </a>
         });
       }
     </div>
   );
  }

}

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

2 个答案: