时间戳

首页 > 解决方案 > 从内部组件触发 Material TextField onChange

javascript - 从内部组件触发 Material TextField onChange

问题描述

我正在构建一个组件，例如：

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 中看起来如何？

标签： javascriptreactjsmaterial-ui

解决方案

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

handleChange需要 a React.ChangeEvent<HTMLInputElement>，所以你必须创建一个假事件并handleChange用它调用函数。

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

推荐阅读