Запустить TextField onChange из внутреннего компонента

Question

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

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, обернутый styleled-компонентами. Что я хочу сделать, это вызвать событие onChange, которое, очевидно, передается в props и далее помещается с помощью {... other}. Я могу изменить значение ввода, но это, вероятно, не так, как это должно быть сделано - потому что onChange не запускается - и форма Formik не изменяется.

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

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

Answer 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);