reactjs - 如何在材料 UI reactjs 中的 textfield 或 textArea 上显示来自 html 响应正文的数据？

Question

我有一个表格。单击“评估”按钮后，我发送了一个帖子请求。此请求的响应是 JSON，我需要将其显示在名为 Output 的 textField 中。如何在“输出”文本字段中显示数据？我只需要将数据（在本例中为 json）显示到文本字段。

我的文本字段如下所示：

const MyTextField = ({select, values, nullable, min, max, helpertext, ...props}) => {

    const [field, meta] = useField(props);

    return (
            <TextField
                select={!!select}
                variant="outlined"
                margin="dense"
                //{...field}
                //defaultValue={meta.initialValue}
                value={field.value}
                error={meta.touched && meta.error}
                helperText={(meta.touched && meta.error) ? meta.error : helpertext}
                onChange={field.onChange}
                onBlur={field.onBlur}
                InputProps={{inputProps: {min: min, max: max}}}
                {...props}
            >
            {
                    values && nullable && values instanceof Array && <MenuItem ><em>None</em></MenuItem>
                }
                {
                    values && values instanceof Array && values.map((value, index) => {
                        return <MenuItem key={value} value={value}>{value}</MenuItem>
                    })
            }
            </TextField>
    );
};

形式看起来像这样

    return (
      <Container fluid className="main-content-container px-4">
      <Row noGutters className="page-header py-4">
      <PageTitle sm="12" title="Transformer Tester Tool" subtitle="" className="text-center"/>
      </Row>
      <Paper id="connPageRoot" className={classes.testerRoot}>
      <Formik onSubmit={submitEvaluate} initialValues={request}>
      <Form>
      <div>
      <MyTextField
          variant="outlined"
          margin="dense"
          id="json2JsonTransformationConfigDto.template"
          name="json2JsonTransformationConfigDto.template"
          label="JSLT template"
          multiline={true}
          rowsMax={4}
          fullWidth={true}/>
      </div>
      <div>
          <MyTextField
            variant="outlined"
            margin="dense"
            id="inputs.0"
            name="inputs.0"
            label="Json payload to be tested"
            multiline={true}
            rowsMax={4}
            fullWidth={true}
          />
          </div>
  <div className={classes.connPageButton}>
      <Button type={"submit"} color="primary" variant="contained">Evaluate</Button> </div>
        <div>
            <MyTextField
            variant="outlined"
            margin="dense"
            id="outputs.0"
            name="outputs.0"
            label="Output"
            value={result}
            multiline={true}
            rowsMax={4}
            fullWidth={true}
            />
      </div>
  </Form>
      </Formik>
      </Paper>
      </Container>
);

标签： reactjsmaterial-uiformik-material-ui