![](/img/trans.png)
[英]Display three different color/text in one by one in each visit and in loop
[英]Multiple buttons; Each one needs to display different text
我正在嘗試建立在某人為我創造的基礎上,我對此非常陌生,所以請善待!
我有 9 個按鈕,每個按鈕在單擊時顯示不同的圖像。 這部分已經完成並且運行良好。 現在我需要每個按鈕也顯示不同的文本。 完全看不懂....
所以..有這個:
var Form = React.createClass({
getInitialState: function(){
return {shirtState:'button',
image:null,
color:'white',
colornotice: 'white shirt temp',
shirtName:'',
bandName:'',
bandcampUrl:''}
},
handleColorChange: function(e){
e.preventDefault();
color = e.target.value
this.setState({color: color, colornotice: color +' THIS TEXT NEEDS TO CHANGE FOR EACH BUTTON'})
},
說“此文本需要更改每個按鈕”的部分顯然需要根據單擊的按鈕進行更改。
這里是按鈕:
<div className="buttons">
<button className="color color-white" onClick={this.handleColorChange} value="white"></button>
<button className="color color-black" onClick={this.handleColorChange} value="black"></button>
<button className="color color-blue" onClick={this.handleColorChange} value="blue"></button>
<button className="color color-green" onClick={this.handleColorChange} value="green"></button>
<button className="color color-orange" onClick={this.handleColorChange} value="orange"></button>
<button className="color color-pink" onClick={this.handleColorChange} value="pink"></button>
<button className="color color-purple" onClick={this.handleColorChange} value="purple"></button>
<button className="color color-red" onClick={this.handleColorChange} value="red"></button>
<button className="color color-yellow" onClick={this.handleColorChange} value="yellow"></button>
</div>
所以,每個按鈕都需要有不同的、預先確定的文本來代替這個片段:
{this.state.colornotice}
我提到的每個按鈕 clcik 上發生的圖像選擇是在 CSS 中確定的。 那部分工作得很好。 這是其中的一部分:
.color-blue{
background: #fff image-url("Blue-Transparent_2300x2415.png");
background-repeat: no-repeat;
background-position: center 0px;
background-size: cover;
等等......所有9個按鈕。
希望這是有道理的。 感謝您的幫助!!!
利用props
:
(以 ES6 和 ES7 語法為例,但你會明白的)
按鈕.js
import React, { PropTypes } from 'react';
export default class Button {
static propTypes = {
buttonText = PropTypes.string
}
render() {
return (
<button value={this.props.buttonText}></button>
);
}
}
父.js
import React, { PropTypes } from 'react';
import Button from './Button';
export default class Parent extends Component {
constructor() {
super();
this.state = {
text: ['red', 'blue', 'orange']
}
}
render() {
let buttons = this.state.text.map(color => <Button buttonText={color} />);
return (
<div>
{buttons}
</div>
);
}
}
想我明白了!
switch(color) {
case 'white':
// do this and that
this.setState({color: color, colornotice: color +' shirt temp1'})
break;
case 'red':
// do this and that
this.setState({color: color, colornotice: color +' shirt temp2'})
break;
default:
this.setState({color: color, colornotice: color +' shirt temp'})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.