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

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

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. properties]selecteindex]与此状态不同。state[${"Comment "+[this.state.selectedIndex]}]

所以你将onChange值输入到状态中而不是传递到PtInput的值prop中

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

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