Я создаю такой компонент, как:

class IncrementField extends Component {
inputRef;

changeValue() {
    this.inputRef.value = parseInt(this.inputRef.value) + 1;
}

render() {
    const { ...other } = this.props;

    return (
        <StyledField>
            <StyledButton onClick={this.changeValue.bind(this)}>-</StyledButton>
            <StyledTextField
                {...other}
                inputRef={input => (this.inputRef = input)}
                type={'number'}
                InputProps={{
                    readOnly: true,
                }}
            />
            <StyledButton onClick={this.changeValue.bind(this)}>+</StyledButton>
        </StyledField>
    )
}
}

Его цель - использовать в форме Formik, например

<IncrementField
        name={`fieldname`}
        key="fieldname"
        value={values.fieldname}
        onChange={changeAndSubmit.bind(this)}
        autoComplete="false">
    </IncrementField>

Его компонент вроде

- 1 +

Где вы нажимаете + и -, и значение увеличивается / уменьшается.

Звучит просто, но я не могу понять, как изменить значение изнутри. StyledTextField - это @ material-ui / core / TextField, заключенный в стилизованные компоненты. Что я хочу сделать, так это вызвать событие onChange, которое, очевидно, передается в props и далее помещается с помощью {... other}. Я могу изменить значение ввода, но, вероятно, это не так, как следует - потому что onChange не запускается - и форма Formik не изменяется.

Я пробовал подход, который я вставил, я пробовал также иметь значение в состоянии, но onChange никогда не срабатывает ... как это сделать?

Один из способов сделать это в Angular может заключаться в использовании декоратора @Output (), как это выглядит в React?

1
radzik 5 Мар 2019 в 13:39

1 ответ

Лучший ответ

Значение всегда должно быть сохранено Formik - поэтому, если произойдет изменение, вы должны вызвать Formiks handleChange в своей функции changeValue.

handleChange принимает React.ChangeEvent<HTMLInputElement>, поэтому вам нужно создать поддельное событие и вызвать с ним функцию handleChange.

const evt = {target: {name: this.props.name, value: this.props.value + 1}}
this.props.handleChange(evt);
2
Lorenz Henk 5 Мар 2019 в 10:45