onChange 在输入框的 React 中不起作用答案

【问题标题】：onChange not working in React for input boxonChange 在输入框的 React 中不起作用
【发布时间】：2021-07-29 19:59:32
【问题描述】：

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

以下是必要的代码：

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}
      />     
            }

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

【问题讨论】：

我没听懂。我将道具模型分配给此组件中的状态变量。现在我可以为OnInputChangethis.setState({ [this.state.galleryModel.Comments[this.state.selectedIndex]]:e.target.value })做这样的事情吗

标签： reactjs onchange

【解决方案1】：

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'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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

【讨论】：

我会试试这个，但我猜你可能在代码中遗漏了一个约束。如果您看到我在value 属性中使用了一个参数，即[this.state.selectedIndex]。输入文本框显示每张不同照片的评论。照片和 cmets 存储在两个不同的数组中。现在我使用状态的selectedIndex 变量从数组中挑选每张照片，并从另一个数组中挑选相关评论。现在，如果用户愿意，我需要一种方法来编辑每条评论。
用潜在的实现编辑了我的答案。调整到您给定的数据结构。在这种情况下，映射一组项目通常是首选的解决方案，而不是使用 selectedIndex 之类的方法。
这是完全正确的，工作得很好。

【解决方案2】：

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 中的数据模型中工作。

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

【讨论】：