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，其中包裹了styled-components。我想做的是触发onChange事件，该事件显然是在props中传递的，并进一步与{... other}放置在一起。我可以更改输入的值，但是可能不是应该这样做的方法-因为未触发onChange-并且Formik的表单未更改。

我尝试了粘贴的方法，也尝试了使用状态值，但是onChange永远不会触发...该怎么做？

在Angular中做到这一点的一种方法可能是使用@Output（）装饰器，它在React中的外观如何？

Answer 1

该值应始终由Formik保存-因此，如果发生更改，则应在handleChange函数中调用Formiks changeValue。

handleChange需要一个React.ChangeEvent<HTMLInputElement>，因此您必须创建一个假事件并使用它调用handleChange函数。

const evt = {target: {name: this.props.name, value: this.props.value + 1}}
this.props.handleChange(evt);

从内部组件触发Material TextField onChange

1 个答案: