我正在尝试在redux表单的字段数组中更新currentValue字段的值的增减,问题是我无法访问先前的值来知道原始数字
我尝试过使用表单值选择器,但没有任何值(如果我更改为1,则可以获取表单中的数字)
我的代码在下面
NewInventory = reduxForm ({
form: 'inventoryform'
})(NewInventory)
const selector = formValueSelector('inventoryform')
NewInventory = connect((state, props) => ({
initialValues: state.inventory.data,
prevVal: selector(state, `${props.product}.currentVal`)
}), { load: loadInventory, arrayPush, change })(NewInventory);
NewInventory.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(NewInventory);
渲染功能
render() {
const { classes, handleSubmit, invalid, prevVal } = this.props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton onClick={() => {this.props.history.push('/')}} className={classes.menuButton} color="inherit" aria-label="Go Back">
<ArrowBack />
</IconButton>
<Typography
variant="h6"
color="inherit"
className={classes.grow}
>
New inventory for list {this.state.currentListId}
</Typography>
</Toolbar>
</AppBar>
<div className={classes.content}>
{ !this.state.isLoading ? (
<form onSubmit={handleSubmit(val => this.saveChanges(val))} >
<FieldArray name="products" prevVal={prevVal} component={renderProducts} />
<br />
<Button variant="contained" color="primary" disabled={invalid}
type="submit"
className={classes.button}>
Save
</Button>
</form>
) : null }
</div>
</div>
);
renderProducts
const renderProducts = ({ fields, meta: { error, submitFailed }, prevVal }) => (
<div style={{width: 'auto', overflowX: 'scroll'}}>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Current</TableCell>
<TableCell numeric>Max</TableCell>
<TableCell numeric>Min</TableCell>
</TableRow>
</TableHead>
<TableBody>
{fields.map((product, index) =>
<TableRow key={index}>
<TableCell component="th" scope="row">
{fields.get(index)["productName"]}
</TableCell>
<TableCell>
<IconButton style={{marginRight: 5}} onClick={() => {console.log(parseInt(prevVal)-1)}} color="inherit" aria-label="Minus">
<Remove />
</IconButton>
<Field
component={renderTextField}
type="number"
name={`${product}.currentVal`}
/>
{prevVal}
<IconButton style={{marginLeft: 5}} onClick={() => {console.log(parseInt(prevVal)+1)}} color="inherit" aria-label="Plus">
<Add />
</IconButton>
</TableCell>
<TableCell numeric>{fields.get(index)["minVal"]}
</TableCell>
<TableCell numeric>{fields.get(index)["maxVal"]}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{error && <span>{error}</span>}
</div>
)