我有一个购物 list 应用程序,它分为以下两个部分:
我将这两个组件实现为:ShoppingList 和:ItemDetails 还有另一个组件:ListItem,代表一个项目行(带有编辑和删除按钮)。 ShoppinList 映射到一组 ListItems。
我的 App 组件获取初始项目数组并将其发送到 ShoppingList。 每次单击特定项目行中的编辑图标时,我都会在我的应用程序组件中设置 selectedItem 对象并呈现 ItemDetails 组件,将 selectedItem 传递给它,如下所示:
toggleDetailsPanel = (itemId) => (e) => {
this.setState((prevState, props) => {
return {
selectedItem: (prevState.selectedItem && prevState.selectedItem.id === itemId) ? null : this.findItemById(itemId),
};
});
};
在 App 渲染函数中,我这样渲染它:
<div className={styles.details_outer_container}>
{this.state.selectedItem ? <ItemDetails handleSubmit={this.saveDetails} item={this.state.selectedItem}/> : null}
</div>
每当点击保存按钮时,我都会在应用程序组件上运行一个函数来更新项目数组中的项目 (saveDetails)。
现在我希望每次单击不同项目行中的不同编辑图标时 ItemDetails 组件都以新值呈现,但输入值不会改变,只有标题正在呈现。
我尝试了我找到的所有解决方案,包括默认值,或使用 getValue() 函数设置值,或在输入上设置动态键,但没有任何帮助。
这是我的 ItemDetails 文件:
import React from 'react';
import PropTypes from 'prop-types';
import { Grid, Row, Col, input, Button } from 'react-bootstrap';
import styles from './styles.css';
export default class ProductDetails extends React.Component {
static propTypes = {
handleSubmit: PropTypes.func.isRequired,
item: PropTypes.any.isRequired,
};
state = {
id: this.props.item.id,
name: this.props.item.name,
quantity: this.props.item.quantity,
price: this.props.item.price,
description: this.props.item.description,
};
// Set appropriate property in state by input name
handleInputChange = (e) => {
this.setState({
[e.target.name]: e.target.value,
});
};
// Submit changed item to parent component
handleDetailsSubmit = (e) => {
this.props.handleSubmit(this.state);
e.preventDefault();
};
render() {
const item = this.props.item;
const itemName = item.name.toUpperCase() || '';
return (
<div className={styles.details_container}>
<div className="sub_header">
<span>{`${itemName} DETAILS`}</span>
</div>
<form className={styles.form_style}>
<p>
<label>{'Quantity'}</label>
<input type="text" ref="quantity" name="quantity" value={this.state.quantity} onChange={this.handleInputChange} />
</p>
<p>
<label>{'Price'}</label>
<input type="text" ref="price" name="price" value={this.state.price} onChange={this.handleInputChange}/>
</p>
<p>
<label>{'Description'}</label>
<textarea rows={2} ref="description" name="description" value={this.state.description} onChange={this.handleInputChange}/>
</p>
<div className={styles.button_div}>
<Button onClick={this.handleDetailsSubmit} bsStyle="primary" bsSize="small">
{'Save'}
</Button>
</div>
</form>
</`enter code here`div>
);
}
}
我明白这是React处理表单的方式,但真的不知道如何解决。 我真的很感激任何帮助:)
最佳答案
ProductDetails
组件仅从 item
获取其初始值。从那时起,它全部保持在状态中。所以你需要在 item
改变时重置状态。
尝试添加这样的内容:
componentWillReceiveProps( newProps ) {
if ( this.props.item !== newProps.item ) {
this.setState( {
id: newProps.item.id,
name: newProps.item.name,
quantity: newProps.item.quantity,
price: newProps.item.price,
description: newProps.item.description,
} )
}
}
关于javascript - 当 prop 在父组件中更改时,子组件中的输入不会更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49483461/