从内部组件触发Material 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。我想做的是触发onChange事件，该事件显然是在props中传递的，并进一步放置在{...其他}。我可以改变输入的值，但这可能不是应该的方式——因为onChange没有被触发Formik的表单也没有改变。

我尝试了粘贴的方法，也尝试了在state中设置值，但是onChange从来不触发...怎么做呢？

在Angular中这样做的一种方法是使用@Output（）装饰器，它在React中看起来怎么样？

Answer 1

该值应该总是由Formik保存——因此，如果发生更改，应该在< code>changeValue函数中调用Formik < code > handle change 。

handleChange接受React.ChangeEvent

js prettyprint-override">const evt = {target: {name: this.props.name, value: this.props.value + 1}}
this.props.handleChange(evt);