javascript - react : change value of hidden input to the number of clicked 'span'

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)添加值？我怎样才能在 react 中正确地做到这一点？

非常感谢您的帮助。

Answer 1

为来自状态的输入赋值:

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

现在的问题是我们如何以及何时设置状态。什么时候容易——应该在点击时完成:

<span onClick={this.handleStarClick}>☆</span>

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

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

哦，但是我们没有 starRating onClick 处理程序中的参数!让我们补充一下。最终版本:

<span onClick={() => this.handleStarClick(1)}>☆</span>`
...
<span onClick={() => this.handleStarClick(5)}>☆</span>