按钮单击更改组件状态

按钮单击更改组件状态

关注
发信
关注(28)粉丝(399)

按钮单击更改组件状态

本文介绍了按钮单击更改组件状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下是HTML。

 < script src =https：//fbcdn-dragon-a.akamaihd达网络/ hphotos-AK-xtp1 / t39.3284-6 / 12624079_897774290317920_1379776191_n.js>< /脚本> 
< script src =https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfp1/t39.3284-6/12624052_751451571621845_431133942_n.js>< / script> 
 
 
< script src =https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js>< /脚本> 
 
< div class =rowid =container> 
< div class =controls> 
< span class =id =controls-size>大小：
< button id =controls-size-small> SMALL< / button> 
< button id =controls-size-med> MEDIUM< / button> 
< button id =controls-size-large> LARGE< / button> 
< / span> 
 
< / div> 
< div id =game-container> 
< / div> 
< / div>

以下是Javscript 

  var SizeEnum = {
小：1，
中等：2，
大：3 
}; 
 
 var Board = React.createClass（{
 getInitialState：function（）{
 return {
 size：SizeEnum.MEDIUM 
}; 
），
 
 componentWillMount：function（）{
 if（this.state.size == SizeEnum.SMALL）{
 this.style = {
 width： 600 +'px'，
 height：320 +'px'，
 margin：'auto'，
 border：'2px solid red'
} 
} else if（this.state.size == SizeEnum.MEDIUM）{
 this.style = {
 width：700 +'px'，
 height：500 +'px'，
 margin：'auto'，
 border：'2px solid red'
} 
} else if（this.state.size == SizeEnum.LARGE）{
 this.style = {
 width：900 +'px'，
 height：720 +'px'，
 margin：'auto'，
 border：'2px红色'b $ b} 
} 
}，
 
 render：function（）{
 return（< div style = {
 this.style 
}> < / DIV> 
）
} 
 
}）; 
 
 ReactDOM.render（< Board />，document.getElementById（game-container））;

和一些CSS 

 ＃game-container {
 position：relative; 
 margin-top：32px; 
 border：1px纯黑色; 
宽度：100％; 
}

我想要的是当单击适当的按钮时，Board组件调整到适当的大小。



我试过这样做

  var board = ReactDOM.render（< Board /> ;, document.getElementById（game-container））; 
 
 document.getElementById（controls-size-small）。onclick = changeBoardSize; 
 document.getElementById（controls-size-med）。onclick = changeBoardSize; 
 document.getElementById（controls-size-large）。onclick = changeBoardSize; 
 
函数changeBoardSize（event）{
 var etid = event.target.id; 
 console.log（etid）; 
 if（etid ==controls-size-small）{
 // method 1 
 board.state.size = SizeEnum.SMALL; 
} else if（etid ==controls-size-med）{
 // method 2 
 board.state.size = SizeEnum.MEDIUM; 
 ReactDOM.render（< Board /> ;, document.getElementById（game-container））; 
} else if（etid ==controls-size-small）{
 // method 3 
 board.setState（{size：SizeEnum.SMALL}）; 
 ReactDOM.render（< Board /> ;, document.getElementById（game-container））; 
} 
}

但它不起作用。

解决方案

不能像这样设置React组件的状态。组件应该负责设置自己的状态。

在你的Board组件中，在componentDidMount中设置事件监听器。最好的解决方案是让按钮成为React应用程序的一部分，但这超出了这个问题的范围。假设按钮不是React应用程序的一部分，然后执行如下操作： 

  var Board = React.createClass （{
 ... 
 ... 
 componentDidMount：function（）{
 var that = this; 
 document.getElementById（controls-size-small ）.addEventListener（'click'，that.changeBoardSize，false）; 
 document.getElementById（controls-size-med）。addEventListener（'click'，that.changeBoardSize，false）; 
 document .getElementById（controls-size-large）。addEventListener（'click'，that.changeBoardSize，false）; 
} 
 
 changeBoardSize：function（e）{
 / *获取元素ID并在这里执行枚举操作* / 
 this.setState（{
 size：newSize 
}）; 
} 
 render：function（） {
 ... 
 ... 
} 
}）;

然后将所有componentWillMount风格的东西移动到 render

更新



小提琴：


The following is the HTML.

<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtp1/t39.3284-6/12624079_897774290317920_1379776191_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfp1/t39.3284-6/12624052_751451571621845_431133942_n.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

<div class="row" id="container">
  <div class="controls">
    <span class="" id="controls-size">Size :
        <button id="controls-size-small">SMALL</button>
        <button id="controls-size-med">MEDIUM</button>
        <button id="controls-size-large">LARGE</button>
    </span>

  </div>
  <div id="game-container">
  </div>
</div>

The following is the Javscript

var SizeEnum = {
  SMALL: 1,
  MEDIUM: 2,
  LARGE: 3
};

var Board = React.createClass({
      getInitialState: function() {
        return {
          size: SizeEnum.MEDIUM
        };
      },

      componentWillMount: function() {
        if (this.state.size == SizeEnum.SMALL) {
          this.style = {
            width: 600 + 'px',
            height: 320 + 'px',
            margin: 'auto',
            border: '2px solid red'
          }
        } else if (this.state.size == SizeEnum.MEDIUM) {
          this.style = {
            width: 700 + 'px',
            height: 500 + 'px',
            margin: 'auto',
            border: '2px solid red'
          }
        } else if (this.state.size == SizeEnum.LARGE) {
          this.style = {
            width: 900 + 'px',
            height: 720 + 'px',
            margin: 'auto',
            border: '2px solid red'
          }
        }
      },

      render: function() {
          return ( < div style = {
            this.style
          } > < /div>
    )
  }

});

ReactDOM.render(<Board / > , document.getElementById("game-container"));

And some CSS

#game-container {
    position: relative;
    margin-top: 32px;
    border: 1px solid black;
    width: 100%;
}

What I want is that when the appropriate button is clicked, the Board component be resized to the appropriate size.

I've tried doing it like this

var board = ReactDOM.render(<Board />, document.getElementById("game-container"));

document.getElementById("controls-size-small").onclick = changeBoardSize;
document.getElementById("controls-size-med").onclick = changeBoardSize;
document.getElementById("controls-size-large").onclick = changeBoardSize;

function changeBoardSize(event) {
    var etid = event.target.id;
    console.log(etid);
    if (etid == "controls-size-small") {
        // method 1
        board.state.size = SizeEnum.SMALL;
    } else if (etid == "controls-size-med") {
        // method 2
        board.state.size = SizeEnum.MEDIUM;
        ReactDOM.render(<Board />, document.getElementById("game-container"));
    } else if (etid == "controls-size-small") {
        // method 3
        board.setState({size: SizeEnum.SMALL});
        ReactDOM.render(<Board />, document.getElementById("game-container"));
    }
}

But it doesn't work.

解决方案

You can't set the state of a React component like that. And the component should be responsible for setting its own state.

Inside your Board component, set up event listeners in componentDidMount. The best solution would be to let the buttons be part of the React application, but that's beyond the scope of this question. So let's say that the buttons are not part of the React application, then do something like this:

var Board = React.createClass({
  ...
  ...
  componentDidMount: function(){
    var that = this;
    document.getElementById("controls-size-small").addEventListener('click', that.changeBoardSize, false);
    document.getElementById("controls-size-med").addEventListener('click', that.changeBoardSize, false);
    document.getElementById("controls-size-large").addEventListener('click', that.changeBoardSize, false);
  }

  changeBoardSize: function(e){
    /* get the element id and do the enum things here */
    this.setState({
      size: newSize
    });
  }
  render: function(){
    ...
    ...
  }
});

Then just move all that componentWillMount style stuff to the render function.

Update

Fiddle: https://jsfiddle.net/dannyjolie/r525ux66/

这篇关于按钮单击更改组件状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-28 08:52
Powered by LMLPHP ©2024 按钮单击更改组件状态 0.034384