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

Question

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

下面是必要的代码：

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 传递，并且该数据模型中的值没有改变，所以新值没有反映出来。是这样吗？非常感谢解决此问题的任何帮助 issue.I 还有一个 componentDidUpdate 来反映更改。

Answer 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>

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

Answer 2

this.state.galleryModel.Comments[this.state.selectedIndex] 与 this.state[${"Comment "+[this.state.selectedIndex]}]

的状态不同

因此，您将 onChange 值馈送到未传递到 PtInput 上的 value prop 的状态中

为了让事情正常进行，您需要决定要使用哪种格式。每当 minorModel 更新到您所在州的这些索引 ${"Comment "+[this.state.selectedIndex]} 时，您都可以解析 galleryModel.Comments，或者在 galleryModel.Comments.

中的数据模型中工作

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

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

onChange not working in React for input box

reactjs

onchange