Redux формирует начальные значения и селектор формы в массиве полей - PullRequest
Новая
       7

Redux формирует начальные значения и селектор формы в массиве полей

0 голосов
/ 27 ноября 2018

Я пытаюсь обновить значение приращения / уменьшения значения поля 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>
)
...