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

【问题标题】：Is there an easy way of setting all other states other than e.target.name to false?是否有一种简单的方法可以将除 e.target.name 之外的所有其他状态设置为 false？
【发布时间】：2018-10-13 19:25:40
【问题描述】：

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

<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 if else if else 语句还有什么更简单的方法吗？**

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

【问题讨论】：

您可以只拥有一个selectedState 变量（例如this.selectedState = "a";），而不是拥有多个state 布尔值。
在那之后我想做这样的事情。 a
你可以这样做：<a className = {this.selectedState === "a" ? "x" : "y"} href="#" name="a" onClick={this.onclick1} > a </a>.
谢谢哥们。太棒了。
其实这是现在真正的问题。我想点击链接。
JOBS

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, }); } }

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> ); } }