onChange 在 React 中不适用于输入框

如何解决onChange 在 React 中不适用于输入框

我有一个输入框，如果从数据库中获取任何值并且输入文本框是可编辑的，我将在其中显示值。但是，这个输入框不反映按键的变化。

这是必要的以下代码：

constructor(props) {
    super(props)
    const { minorModel } = this.props;
    this.state =
    {
        galleryModel: minorModel.galleryModel,selectedindex: 0           
    }
}
componentDidUpdate() {
    this.props.minorModel.galleryModel = this.state.galleryModel;
    
}

onInputChange=(e)=>{
   this.setState({
       [e.target.name]:e.target.value
   })
    
}
{this.state.galleryModel.photos.length > 0 && 
   <PtInput type="text" label="Comment" 
         value={this.state.galleryModel.Comments[this.state.selectedindex] === null ? 
                  "Not Available " : 
             this.state.galleryModel.Comments[this.state.selectedindex]}
               onChange={this.onInputChange} 
           name={`${"Comment "+[this.state.selectedindex]}`} 
               disabled={this.props.disabled}
      />     
            }

我可能认为问题是因为我使用的数据模型在构造函数中作为 props 传递，并且该数据模型中的值没有改变，所以没有反映新值。是这样吗？解决此问题的任何帮助都非常感谢。我还有一个 componentDidUpdate 来反映更改。

解决方法

public class UIManager : StateMachine,IUIManager { public static UIManager Instance; public ITitleMenu TitleMenu; public void Setup() { if (Instance == null) { Instance = this; } else { throw new Exception(); } TitleMenu = GetComponentsInChildren<ITitleMenu>(true)[0]; } 属性和您的 value 处理程序之间没有联系，因为它们不依赖于相同的状态，因此您的输入不受控制。

当组件挂载时，您可以将数据加载到用于控制输入的相同状态。

这是一个简化的潜在实现：

onChange

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      "pics": ['https://placehold.co/200x100','https://placehold.co/200x100'],"comments": [["comment 1 pic 1","comment 2 pic 1"],["comment 1 pic 2","comment 2 pic 2"]],}
  }
  render() {
    return (
      <div>
        {this.state.pics.map((pic,i) => 
           <Picture pic={pic} comments={this.state.comments[i]} />)}
      </div>
    )
  }
}

const Picture = ({ pic,comments }) => {
  return <div>
    <img src={pic} />
    {comments.map(comment => <Comment comment={comment} />)}
  </div>
}

class Comment extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: this.props.comment };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidUpdate() {
    // do stuff when Comment component updates
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <input 
        type="text" 
        value={this.state.value} 
        onChange={this.handleChange} 
      />
    );
  }
}
ReactDOM.render(<App />,document.getElementById('root'));

此外，您不应该更新组件内的道具。它们应该是不可变的和自上而下的。

,

this.state.galleryModel.Comments[this.state.selectedIndex] 与 this.state[${"Comment "+[this.state.selectedIndex]}] 的状态不同

因此，您将 onChange 值输入到未传递到 PtInput 上的 value 属性的状态

为了使事情正常工作，您需要决定要使用哪种格式。您可以在minorModel 更新您所在州的这些索引${"Comment "+[this.state.selectedIndex]} 时解析galleryModel.Comments，或者在galleryModel.Comments 中的数据模型中工作。

我建议您考虑一下为什么需要相同信息的两个来源。