[英]Changing text on button push (React.js)
我对使用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;
理想情况下,我想做的是单击每个按钮时在按钮下方显示不同的文本段落。 我见过一些帖子希望更改按钮的文字或颜色,但并没有真正影响单独的文字。
对此的任何指导都将非常有用。
使用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'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.