React 输入框onChange事件不生效，按键输入无变化如何解决？

• 你当前的输入框值绑定的是this.state.galleryModel.Comments[this.state.selectedIndex]，但onInputChange方法中更新的是和它完全无关的state字段（键是你自定义的Comment X格式字符串），相当于你修改的state根本不是输入框使用的取值来源，自然不会触发内容回显。
• 直接在componentDidUpdate中修改props属于违反React设计原则的操作，props是只读属性，强制修改会引发不可预期的渲染异常，甚至可能触发死循环。
• 初始化state时直接引用props传入的对象属于浅拷贝，如果父组件修改原对象会污染本地state，反之也可能出现双向影响的异常。

1. 修正状态更新逻辑 #

修改onInputChange方法，直接更新galleryModel中对应下标的评论内容，注意更新引用类型的值时要生成新的对象，避免React检测不到状态变化：

onInputChange=(e)=>{
   const newComment = e.target.value;
   const currentIndex = this.state.selectedIndex;
   // 生成新的comments数组避免修改原引用
   const newComments = [...this.state.galleryModel.Comments];
   newComments[currentIndex] = newComment;
   // 生成新的galleryModel对象触发重渲染
   this.setState({
       galleryModel: {
           ...this.state.galleryModel,
           Comments: newComments
       }
   })
}

2. 移除非法修改props的逻辑 #

删除componentDidUpdate中直接赋值修改this.props.minorModel的代码，如果需要将变更同步到父组件，应该让父组件传入回调方法，在状态更新后调用回调同步：

// 父组件传更新回调的场景示例，不需要同步可以直接删掉整个componentDidUpdate
componentDidUpdate(prevProps, prevState) {
    // 只有galleryModel真的变化时才同步给父组件，避免死循环
    if(prevState.galleryModel !== this.state.galleryModel) {
        // 调用父组件传入的更新回调，不要直接修改props
        this.props.updateGalleryModel(this.state.galleryModel);
    }
}

3. 可选：初始化state时做深拷贝 #

如果galleryModel是多层嵌套的复杂对象，初始化时建议做深拷贝避免引用污染：

constructor(props) {
    super(props)
    const { minorModel } = this.props;
    this.state =
    {
        // 复杂对象用深拷贝，简单对象可以直接用扩展运算符
        galleryModel: JSON.parse(JSON.stringify(minorModel.galleryModel)),
        selectedIndex: 0           
    }
}

4. 简化输入框属性（可选） #

调整后name属性已经没有作用，可以直接删掉简化代码，还可以用空值合并运算符简化判空逻辑：

{this.state.galleryModel.photos.length > 0 && 
   <PtInput type="text" label="Comment" 
         value={this.state.galleryModel.Comments[this.state.selectedIndex] ?? "Not Available "}
         onChange={this.onInputChange} 
         disabled={this.props.disabled}
   />
}

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