React中Stars组件ID未定义问题及取值赋值解决方案咨询

核心问题分析 #

1. Input的id未定义：父组件movielist.js给Stars传递的是id={movie.id}，但你在Stars的render里误用了this.props.movie.id——Stars并未接收movie这个props，自然返回undefined。
2. handleStars方法的错误：
   • 点击事件的回调参数不是props，而是事件对象event。
   • 直接给this.setState.starLevel赋值不符合React状态更新规则，必须调用this.setState()方法。
   • 获取input值的方式错误，不能直接用字符串做数值比较，需要先获取DOM元素再读取其value。

修正后的Stars.js代码 #

export default class Stars extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            starLevel: 0
        }
        this.handleStars = this.handleStars.bind(this)
        // 创建ref用于获取input元素
        this.starInputRef = React.createRef()
    }

    handleStars(){
        // 通过ref获取input值并转为数字
        const starValue = Number(this.starInputRef.current.value)
        // 验证评分范围1-5
        if (starValue > 0 && starValue < 6) {
            this.setState({ starLevel: starValue })
        } else {
            alert('请输入1-5之间的评分')
        }
    }

    render(){
        return(
            <div>
                <h3>{this.state.starLevel}</h3>
                {/* 使用父组件传递的id拼接input的id，同时绑定ref */}
                <input 
                    id={`stars-${this.props.id}`}
                    type="number"
                    min="1"
                    max="5"
                    ref={this.starInputRef}
                />
                <button onClick={this.handleStars}>Submit Stars</button>
            </div>
        )
    }
}

额外优化点 #

• 给input添加type="number"、min="1"、max="5"，从UI层面限制输入范围，减少后端验证压力。
• 使用React的ref获取DOM元素，比document.getElementById更符合组件化思想，避免全局DOM查询的潜在问题。

内容的提问来源于stack exchange，提问作者ProfessorSocks