Redux表单初始值和字段数组上的表单选择器

时间:2018-11-27 07:01:13

标签: arrays reactjs field redux-form

我正在尝试在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>
)

0 个答案:

没有答案