在按钮按下时更改文本 (React.js)

IT技术 javascript reactjs
2021-04-28 19:49:05

我对使用 react.js 比较陌生。我在 div 顶部有一系列按钮，当按下每个按钮时，我想显示一组不同的文本。我已经能够创建一个在按下按钮时激活的功能（并使用警报对其进行测试），但我似乎无法弄清楚如何让它为每个不同的按钮显示一组不同的文本或如何根据按下的按钮传递它。

class App extends Component {
   handleClick() {
     alert("Test");
   }

   render() {
     return (

  <body>
    <div class="App">
      <div class="floating-box">
          <div class="search-tickets">
            <button id="demo" class="color-button">Button 1</button>
            <button class="color-button button2">Button 2</button>
            <button class="color-button button3">Button 3</button>
            <button ref="test" class="color-button button4" onClick={this.handleClick}>Button 4</button>

            <h1 class="h1-text">Text</h1><br/>
            <h2>
            <br/>-123
            <br/>-456
            <br/
            </h2>

          </div>
      </div>
    </div>
  </body>
  );
}

export default App;

理想情况下，我想要做的是在单击每个按钮时在按钮下方显示不同的文本段落。我见过一些帖子希望更改按钮文本或颜色，但并没有真正影响单独的一段文本。

任何关于这方面的指导都会非常有帮助。

2个回答

使用this.setState更新变量，然后渲染基于这一点。按钮具有onClick调用更新状态的函数：

class App extends React.Component {
  state = {
    text: 'something'
  }

  onClickButton1 = () => {
    this.setState({
      text: 'clicked 1'
    });
  }

  onClickButton2 = () => {
    this.setState({
      text: 'clicked 2'
    });
  }

  // etc...

  render() {
    return (
      <div>
        <button onClick={this.onClickButton1}>
          Button 1
        </button>
        <button onClick={this.onClickButton2}>
          Button 2
        </button>
        <h1>{this.state.text}</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
<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="app"></div>

您可以使用您想要的文本定义一个数组，以使其简洁。使用 this.setState 来跟踪你点击的内容：https ://codepen.io/sscaff1/pen/mBGLjm

const texts = [
  'Text 1',
  'Text 2',
  'Text 3',
  'Text 4'
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedText: ''
    }
  }

  handleClick = (i) => {
        this.setState({ clickedText: texts[i] });
  };

  render() {
    const { clickedText } = this.state;
    return (
      <div>
        {texts.map((text, i) => 
          <button key={i} onClick={() => this.handleClick(i)}>Click me {i + 1}</button>
        )}
        {clickedText && <p>I clicked on button with text: {clickedText}</p>}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
其它你可能感兴趣的问题
上一篇单击一行以打开包含该行数据的模式 下一篇带有 React Native 的 Nox 模拟器