ReactJS＆amp; ECMAScript 6 - 与Refs＆amp;滑块

Question

我有2个组件：app＆amp;滑块，使用以下相关代码：

1。滑块：

 'use strict';
 var React = require('react');

 class Slider extends React.Component{
   constructor(props){
       super(props)
   }

   render(){
       return(
           <div>
            <input type="range" min="0" max="255" ref="colors" 
                   onChange={this.props.update} />
           </div>
      )
   }
}

 module.exports = Slider;

2。应用

 ...
 class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
          red: 0,
          green: 0,
          blue: 0
      }
  }
  updateColors(){
      this.setState ({
        red:this.refs.red.refs.colors.getDOMNode().value,
        green:this.refs.green.refs.colors.getDOMNode().value,
        blue:this.refs.blue.refs.colors.getDOMNode().value
    })
}

 render() {
    return (
            <div>
                <Slider ref="red" update={this.updateColors.bind(this)} />
                <label>Red: {this.state.red}</label>
                <Slider ref="green" update={this.updateColors.bind(this)} />
                <label>Green: {this.state.green}</label>
                <Slider ref="blue" update={this.updateColors.bind(this)} />
                <label>Blue: {this.state.blue}</label>
            </div>
      )
       .....
 };

问题：

页面加载后，我应该更改任何颜色的范围，其他颜色也会改变。之后（不是新的页面加载），颜色分别改变为移动的那个。

在初始页面加载后，当仅移动一种颜色时，是什么导致所有颜色更改？

Answer 1

问题是你没有给滑块输入一个值。我修改了两个文件以使其正常工作。

<强>滑块

 'use strict';
 var React = require('react');

 class Slider extends React.Component{
   constructor(props){
       super(props)
   }

   render(){
       return(
           <div>
            <input type="range" min="0" max="255" ref="colors" 
                   value={this.props.value}
                   onChange={this.props.update} />
           </div>
      )
   }
}

module.exports = Slider;

应用

 ...
 class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
          red: 0,
          green: 0,
          blue: 0
      }
  }
  updateColors(){
      this.setState ({
        red:this.refs.red.refs.colors.getDOMNode().value,
        green:this.refs.green.refs.colors.getDOMNode().value,
        blue:this.refs.blue.refs.colors.getDOMNode().value
    })
}

 render() {
    return (
            <div>
                <Slider ref="red" value={this.state.red} update={this.updateColors.bind(this)} />
                <label>Red: {this.state.red}</label>
                <Slider ref="green" value={this.state.green} update={this.updateColors.bind(this)} />
                <label>Green: {this.state.green}</label>
                <Slider ref="blue" value={this.state.blue} update={this.updateColors.bind(this)} />
                <label>Blue: {this.state.blue}</label>
            </div>
       );
    }
       .....
 };