Question

我目前正在尝试更改输入值以及Material-UI自动完成的值

对象值从子组件newLabelDialog传递。当我从孩子传递对象时，我试图在自动完成文本字段中设置并显示值和输入值，而无需单击自动完成中文本字段旁边的下拉按钮

我有组件和对象的索引，但是我不知道如何使用useRef钩子获取'value'属性。

//这是处理来自孩子的vlaue的功能

 const hanldeMainLabelFromDialog = (index) => (v) => {
    //console.log(autoCompleteRef.current[index]);
    // let labelLength = projectState.labels.length;
    // autoCompleteRef.current[index].getElementById("main").value = v.title
    // console.log(`label${labelLength}`);

    // autoCompleteRef.current[index].value = v;
    // autoCompleteRef.current[index].inputValue = v.title;
}


//This is autocopmlete component in parent component.

{projectState.labels.map((i, k) => (
              <>
                {k === 0 && (
                  <>
                    <Grid container item xs={12}>
                      <Grid item xs={10}>
                        <Autocomplete
                          id="main"
                          ref={(ref) => (autoCompleteRef.current[k] = ref)}
                          name={`label${k + 1}`}
                          options={labelData}
                          getOptionSelected={(option, value) =>
                            option.title === value.title
                          }
                          getOptionLabel={(option) =>
                            option.title ? option.title : ""
                          }
                          classes={{ paper: classes.paper }}
                          ListboxProps={{ style: { maxHeight: "180px" } }}
                          inputValue={labelData[labelData.length - 1].title}
                          value = {labelData[labelData.length - 1]}
                          onChange={handleMainLabel(k)}
                          renderInput={(props) => (
                            <TextFieldWithInFocusHelp
                              {...props}
                              required
                              label={`Main Label ${k + 1}`}
                              help="Select the label for the non-defective classification. No sub-labels are allowed for this category."
                            />
                          )}
                        />
                      </Grid>
                      <Grid container item xs={1} alignItems="center">
                        <TooltipStyled
                          placement="right"
                          title="Add new main label."
                        >
                          <IconButton onClick={toggleNewLabelDialogOpen}>
                            <AddCircleIcon color="primary" fontSize="large" />
                          </IconButton>
                        </TooltipStyled>
                        <NewLabelDialog
                          open={newLabelDialogOpen}
                          onClose={toggleNewLabelDialogOpen}
                          onChange={hanldeMainLabelFromDialog(k - 1)}
                        />
                      </Grid>
                    </Grid>
                  </>

挂钩如何在材料ui autcomplete中使用useRef设置输入值和值

0 个答案: