多个按钮；每一个都需要显示不同的文字答案

【问题标题】：Multiple buttons; Each one needs to display different text多个按钮；每一个都需要显示不同的文字
【发布时间】：2015-10-21 08:33:36
【问题描述】：

我正在尝试以某人为我创建的内容为基础，我对此非常陌生，所以请善待！

我有 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>

因此，每个按钮都需要有不同的预定文本来代替这个 sn-p：

{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 个按钮。

希望这是有道理的。谢谢你的帮助！！！

【问题讨论】：

标签： javascript jquery css onclick reactjs

【解决方案1】：

利用props:
（以 ES6 和 ES7 语法为例，但你会明白的）

Button.js

import React, { PropTypes } from 'react';

export default class Button {
  static propTypes = {
    buttonText = PropTypes.string
  }

  render() {
    return (
      <button value={this.props.buttonText}></button>
    );
  }
}

Parent.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>
    );
  }
}

【讨论】：

【解决方案2】：

我想我明白了！

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'})
  }

【讨论】：