Question

我还在学习很多关于React的内容，但我发现切换比我想象的要困难得多。

我打算实现的是一个标题为“添加我”的链接，点击后会显示标题为“已添加”的新标签。还删除了原来的“添加我”链接。

下面的当前代码是我所拥有的，我认为它可以工作，但事实并非如此。我读了很多问题＆amp;回答这个简单的行动，其中没有一个在这里起作用。任何洞察我做错了什么和/或如何纠正它都会非常有帮助！

提前谢谢！

JSX：

class App extends React.Component {

constructor(props) {
  super(props);
  this.state = {
    showComponent: false,
  };
  this.Search__toggle = this.Search__toggle.bind(this);
}

Search__toggle() {
  this.setState({
    showComponent: true,
  });
}

render() {
    return ( 
        <div className="FormField__control">
            <a onClick={this.Search__toggle}><i className="fa fa-plus" aria-hidden="true" />
                Add Me
            </a>
            {this.state.showComponent ? <div>Added!</div> : null }
        </div>
    );
}

export default App;

Answer 1

您可以通过修改Search__toggle（）方法切换已添加！标签，如下所示

  Search__toggle() {
    let oldState = this.state
    this.setState({
      showComponent: !oldState.showComponent,
    });
  }

此外，如果您想隐藏添加我链接，请修改render（）方法，如下所示

render() {
      return ( 
          <div className="FormField__control">
              {this.state.showComponent ? 
                <div>Added!</div> :
                <a onClick={this.Search__toggle}><i className="fa fa-plus" aria-hidden="true" />
                  Add Me
                </a> 
              }
          </div>
      );
  }

Answer 2

你几乎就在那里:-)。不确定Search__toggle是否是您的功能的正确名称，因为您不想切换元素，而是添加一次。

＆＃13;

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showComponent: false,
    };
    this.addItem = this.addItem.bind(this);
  }

  addItem() {
    this.setState({
      showComponent: true,
    });
  }

  render() {
    return ( 
        <div className="FormField__control">
            { this.state.showComponent ?
            "Added"
            :
            <a onClick={this.addItem}>
              <i className="fa fa-plus" aria-hidden="true" />Add Me
            </a>
            }
        </div>
    );
  }
}

ReactDOM.render(
  <App name="World" />,
  document.getElementById('container')
);

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

＆＃13;

如果您想要切换元素，那么这是另一个版本。

＆＃13;

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showComponent: false,
    };
    this.Search__toggle = this.Search__toggle.bind(this);
  }

  Search__toggle() {
    this.setState({
      showComponent: !this.state.showComponent,
    });
  }

  render() {
    return ( 
        <div className="FormField__control">
            { this.state.showComponent ?
            <a onClick={this.Search__toggle}>
              <i className="fa fa-minus" aria-hidden="true" />Added
            </a>
            :
            <a onClick={this.Search__toggle}>
              <i className="fa fa-plus" aria-hidden="true" />Add Me
            </a>
            }
        </div>
    );
  }
}

ReactDOM.render(
  <App name="World" />,
  document.getElementById('container')
);

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

＆＃13;

希望这有帮助！

如何在React中添加一个切换下拉结果的按钮？

2 个答案: