Question

我的一个组件中有一个div这样的等级：

var Rating = React.createClass({
    render: function () {
        return (
            <div className="rate-line">
                <div className="rate-title">{this.props.name}</div>
                <div className="rating">
                    <span>☆</span>
                    <span>☆</span>
                    <span>☆</span>
                    <span>☆</span>
                    <span>☆</span>
                </div>
                <input type="hidden" id={this.props.id}/>
            </div>
        );
    }
});

我现在已在其他组件中标记：

<div>
     <div className="result-label">Score</div>
     <Rating/>
</div>

如果点击第三个跨度，如何为数字3等隐藏输入添加值？如何做好反应？

非常感谢您的帮助。

Answer 1

从州：

为您的输入分配值

<input type="hidden" id={this.props.id} value={this.state.starRating} />

现在的问题是我们如何以及何时设置状态。什么时候很容易 - 应该点击：

☆

剩下的就是编写实际的处理程序：

handleStarClick: function(starRating){this.setState({starRating})}

哦，但我们在onClick处理程序中没有starRating参数！让我们添加一下。最终版本：

this.handleStarClick(1)}>☆` ... this.handleStarClick(5)}>☆

Answer 2

我不确定您认为自己为何需要隐藏输入。你能解释一下这个决定吗？

从评级组件中获取值的推荐方法是传递一个回调，无论何时单击和更改，都会使用评级的新值调用该回调。

看看这个实现，看看我的意思（ N.B。 它的可运行）。

＆＃13;

const Rating = React.createClass({
  getInitialState: function () {
    const stars = this.props.stars;

    return {
      value: stars,
      dynamicValue: stars
    };
  },

  handleClick: function (newValue) {
    this.setState({
      value: newValue,
      dynamicValue: newValue
    });

    if (this.props.onRated) {
      this.props.onRated(newValue);
    }
  },

  handleMouseEnter: function (newValue) {
    this.setState({ dynamicValue: newValue });
  },

  handleMouseLeave: function (newValue) {
    this.setState({ dynamicValue: this.state.value });
  },

  render: function () {
    const starSpans = [];

    for (let v = 1; v <= 5; v++) {
      if (v <= this.state.dynamicValue) {
        starSpans.push(
          <span
              key={v}
              className="star"
              onMouseEnter={this.handleMouseEnter.bind(this, v)}
              onMouseLeave={this.handleMouseLeave.bind(this, v)}
              onClick={this.handleClick.bind(this, v)}
              >
            ★
          </span>
        );
      } else {
        starSpans.push(
          <span
              key={v}
              className="star"
              onMouseEnter={this.handleMouseEnter.bind(this, v)}
              onMouseLeave={this.handleMouseLeave.bind(this, v)}
              onClick={this.handleClick.bind(this, v)}
              >
            ☆
          </span>
        );
      }
    }

    return <div>{starSpans}</div>;
  }
});

function handleRated(newRating) {
  console.log(`The new rating is: ${newRating}`);
}

ReactDOM.render(
  <div>
    <Rating stars={1} onRated={handleRated} />
    <Rating stars={2} />
    <Rating stars={3} />
    <Rating stars={4} />
    <Rating stars={5} />
  </div>,
  document.getElementById('container')
);

＆＃13;

.star {
  font-size: 2em;
  color: #ff851b;
  cursor: pointer;
}

＆＃13;

<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="container"></div>

＆＃13;

Answer 3

你可以这样做

var Rating = React.createClass({
getInitialState: function() {
 return {rating: 0}
},
handleClick: fuction(e) {
 var rating = e.currentTarget.dataset.id
 this.setState({ rating: rating })
},
render: function () {
    return (
        <div className="rate-line">
            <div className="rate-title">{this.props.name}</div>
            <div className="rating">
                <span onCLick={this.handleClick} data-id="1">☆</span>
                <span onCLick={this.handleClick} data-id="2">☆</span>
                <span onCLick={this.handleClick} data-id="3">☆</span>
                <span onCLick={this.handleClick} data-id="4">☆</span>
                <span onCLick={this.handleClick} data-id="5">☆</span>
            </div>
            <input type="hidden" id={this.props.id} value={this.state.rating}/>
        </div>
    );
}

}）;

反应：将隐藏输入的值更改为点击的数量＆span;＆＃39; span＆＃39;

3 个答案: