如何在反应输入中设置状态值？答案

【问题标题】：how to set the state values in react input?如何在反应输入中设置状态值？
【发布时间】：2021-03-22 12:27:40
【问题描述】：

您能帮我如何在输入字段中显示状态值，而且输入字段是可编辑的。我正在尝试很多技巧，但没有帮助，在 Stackoverflow 中也找不到 .................................... …… 我想在输入字段中显示品牌代码状态属性“BrandCode”值..........................

这里是品牌代码返回值

品牌代码：{ 品牌代码：“尼克”，品牌编号：1 }



state = {
        brandcode: [],
    };

 Getbrandcode(brandId) {
        getBrandCode(brandId)
            .then(res => {
                debugger;
                //console.log(res);
                this.setState({
                    brandcode: res.data.Data // i want show brandcode values in input 
                });
            });
    }
``
its a render.....
``
render() {

        // const { formikProps} = this.props
        return (
            <Formik
                enableReinitialize={true}
                initialValues={this.masterstyledata}
                onSubmit={(values, actions) => {
                    this.onSaveClick(values);
                }}


                validationSchema={this.validationSchema}
            >
                {formikProps => (
                    <>
                       
                        <Card>
                            <CardBody>
                                {this.state.isLoading && <LoadingPanel />}
                                <Row>
                                    <Col lg={12}>
                                        <Form>
                                            <FormGroup row>
                                                
                                                <Label for="Value" sm={3}>Brand</Label>
                                                <Col sm={3}>
                                                    <ComboBoxValue
                                                        data={this.state.branddesc}
                                                        style={{ width: '100%' }}
                                                        name="BrandID"
                                                        textField="text"
                                                        valueField="Value"
                                                        dataItemKey="Value"
                                                        onChange={(e) => {
                                                            this.BrandCodehandleChange(e);
                                                            formikProps.setFieldValue("BrandID", e.target.value)
                                                        }}
                                                        value={formikProps.values.BrandID}
                                                        placeholder="Brand Description"
                                                    />
                                                </Col>
                                            </FormGroup>
                                            <FormGroup row>
                                                //here i want set values
                                                <Label for="BrandCode" sm={3}>Style ID</Label>
                                                <Col sm={3}> <Input sm={3}
                                                    type="text"
                                                    name="BrandCode"
                                                    id="BrandCode"
                                                    onChange={formikProps.handleChange('MasterStyleCode')}
                                                    value={formikProps.values.MasterStyleCode}
                                                    placeholder="Enter Style Id"
                                                />
                                                    <Error>{formikProps.errors.MasterStyleCode}</Error>
                                                </Col>

                                           </FormGroup>
                                        </Form>
                                    </Col>
                                </Row>
                            </CardBody>
                        </Card>

【问题讨论】：

这个组件中的this.masterstyledata 是什么？我认为你应该把你的状态而不是那个，此外，你必须有一个加载状态才能在获取brandID时显示加载。
masterstyledata = { IsActive: true };它是一个对象。我需要在输入字段中设置品牌代码状态值

标签： reactjs forms input setstate formik

【解决方案1】：

你在使用handleOnChage和onChange时犯了一个错误，这里：

onChange={formikProps.handleChange('MasterStyleCode')}

在渲染时，这个函数将被执行，结果是undefined（你知道，因为它是一个 void 函数！），这不是你想要的，要解决这个问题你有制作一个 HOF 并使用 setFieldValue 如果您的输入 name 与您想要更改的 initialValue 键不同，例如：

onChange={(event) => {
   formikProps.setFieldValue('MasterStyleCode', event.target.value)
}}

【讨论】：