logo标签列表

按下按钮更改文本（React.js）

javascriptreactjs
4

我相对来说对使用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个回答
8

使用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>

在一个函数中为多个按钮使用if语句是否可行，还是最好将它们分成不同的函数，就像这里一样？ - Spencer
0
你可以定义一个包含所需文本的数组以使其更简洁。使用 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'));
好的，非常酷。如果我要显示的文本是一个数组，并且我想将它作为列表显示怎么办？为了简单起见，我将把不同的数组设置为预设常量。 - Spencer
请再看一下CodePen。我已经更新了它，以符合您的要求。 - Steven Scaffidi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接