Question

我正在用React开始我的冒险，所以对我来说这是一段艰难的时期，但是我准备了这样的pen供你测试。以下是代码的一部分：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
        settings: true,
        next: false,
    };

  }


   toggler(abc) {
     console.log(">>", abc)
     this.setState({
       next: !this.state.next
       /* {abc}: this.state.{abc} */
     }) 
     console.log(this.state.next)

   }

  render() {
    return (
      <div className="kalreg">
      <MyButton name='settings' isActive={this.state.settings} type="settings" toggle={this.toggler.bind(this)}/>
      <MyButton name='settings2' isActive={this.state.settings} type="settings" toggle={this.toggler.bind(this)}/>
      <MyButton name='next' isActive={this.state.next} type="next" toggle={this.toggler.bind(this)}/>

    </div>)
  }

}

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

  onChangeName(){
    console.log(this.props.type)
    if ( this.props.isActive ) { console.log("this one is active"); } else { console.log("ouch! it is not active, ignoring!"); return;}
    this.props.toggle(this.props.type);
  }

  render () {
    if ( this.props.isActive ) {
      return ( <div className="button notVisible" onClick={this.onChangeName.bind(this)}>{this.props.name}</div>)
    } else {
       return ( <div className="button visible" onClick={this.onChangeName.bind(this)}>{this.props.name}</div>)
    }
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

我想要实现的是当我按下其中一个＆＃34;设置＆＃34;按钮（黄色）＆＃34; next＆＃34;按钮变得不可点亮（绿色）。有一个切换功能，每当我点击设置按钮时，它会打开和关闭＆＃34; next＆＃34;按钮。

它的效果非常好，但它只是一个更大项目的草案，我想稍微自动化它。

正如您所看到的，我使用＆＃34; isActive＆＃34;创建我的<MyButton>和＆＃34;键入＆＃34;道具。但 isActive 包含this.state.settings中的内容，而 type 是＆＃34; settings＆＃34;。不使用两个变量，将按钮的类型传递给其组件和组件会很棒，具体取决于它的类型将检查其父级的this.state。{type}。我使用{type}因为我想动态检查它。那可能吗？

如果是这样 - 怎么做？

我的第一次尝试是通过<MyButton>功能将类型从<App>传递到toggler。我将变量命名为＃34; abc＆＃34;。我评论了我想要这样做的方式，因为它不起作用：

{abc} :! this.state。{abc}

任何解决这个问题的想法都不仅仅是值得赞赏的。 Kalreg。

Answer 1

有点不清楚你想在这里实现什么。如果你想根据类型动态连接状态，就像你在代码中写的那样：{abc}: !this.state.{abc}每个按钮都会自动切换，而不是下一个按钮。在这种情况下，您的语法有点不正确，如果您将其编写为：

，它将起作用

[abc]: !this.state[abc]

但正如我所说，在您的示例中，这会使settings按钮更改this.state.settings禁用自身而不是下一个按钮的状态。

另一个注意事项是，如果MyButton组件没有必要因其他原因知道自己的类型，则不必将其作为prop传递，而是让组件将其作为参数（this.props.toggle(this.props.type);）。您只需在父级中将切换功能定义为：

toggle={() => this.toggler("settings")}

未将type作为道具传递。

Answer 2

所以基本上我们想要settings和settings2按钮，当我们点击它们时，它们会切换next按钮的状态，使其无法点击（绿色）。

如果这是我们的目标，那么

我们不需要设置按钮isActive道具。（因为无论如何它总是会活跃的）
我们也不需要在“下一步”按钮上添加toggle道具。（因为点击下一个按钮不应该切换任何东西）
而不是在状态中有两个变量，为什么不只有一个，然后用它来确定下一个按钮的isActive道具？

组件看起来像这样：

constructor() {
        super();
        this.state = {
            nextIsActive: false,
        };
    }

    toggler() {
        this.setState({
            nextIsActive: !this.state.nextIsActive
        }) 

        console.log(this.state);
    }

    render() {
        const {nextIsActive} = this.state

        return (
            <div className="kalreg">
                <MyButton name='settings' isActive={true} type="settings" toggle={this.toggler.bind(this)}/>
                <MyButton name='settings2' isActive={true} type="settings" toggle={this.toggler.bind(this)}/>
                <MyButton name='next' isActive={nextIsActive}/>
            </div>
        )
    }

通过这种方式，您不必拥有2个必须动态更新的状态属性，因为它会增加应用程序的复杂性。

您可以在此处查看完成的产品：Codepen

在React.js

2 个答案: