如何在自动完成材料ui中使用onchange? [英] How to use onchange with autocomplete material ui?

问题描述

使用handleChange方法处理具有钩子样式的Form Input的OnChange事件，该事件将对象设置为关闭状态.

With the method handleChange is handled OnChange event of the Form Input with Hooks style that set the state off the object.

handleChange函数依次调用setLocation，该函数用新值更新位置状态.

The handleChange function in turn calls setLocation which updates the location state with the new value.

为了使用户数据输入更加容易，我决定将城市字段更改为自动完成功能，但是无法捕获自动完成功能的值.他在文档中告诉我，我需要传递两个参数，但我不太了解

To make user data entry easier, I decided to change the city field to an autocomplete, but I failed to capture the value of the autocomplete. In the documentation he tells me that I need to pass two arguments but I can't understand very well

function(event: object, value: any) => void
event: The event source of the callback
value: null

如何访问该字段的值并将其放入函数中以插入数据?

How can I access the value of the field and put it into my function to insert the data?

        <Autocomplete
        style={{ width: 300 }}
        value={location.City}
        onChange={handleChange}
        options={list.City}
        classes={{
          option: classes.option,
        }}
        autoHighlight
        getOptionLabel={option => typeof option === 'string' ? option : option.City}
        renderOption={option => (
          <React.Fragment>

            {option.City} -{option.State}
          </React.Fragment>
        )}

         renderInput={params => (
           <TextField {...params} label="City"  value={location.City}  margin="normal" variant="outlined" style={{ width: 220 }} inputProps={{
             ...params.inputProps,
             autoComplete: 'disabled', // disable autocomplete and autofill
           }}/>
         )}
       />

推荐答案

如果您只是想在用户键入时获取输入值，则需要使用 onInputChange.当用户从下拉菜单中选择一个选项时， onChange 处理程序将运行.

If you're just trying to get the value of the input as the user types, you need to use onInputChange. The onChange handler runs when the user selects an option from the drop down.

export default function ComboBox() {
  function handleInputChange(event, value) {
    console.log(value);
  }

  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option: FilmOptionType) => option.title}
      style={{ width: 300 }}
      onInputChange={handleInputChange}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />
  );
}

代码框

这篇关于如何在自动完成材料ui中使用onchange?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！