Как создать автозаполнение в React - PullRequest
Новая
       15

Как создать автозаполнение в React

0 голосов
/ 24 октября 2018

У меня есть функция, в которой я вызываю codigo и nombre в регистрациях таблицы БД.Чего я хочу добиться, так это того, чтобы цифровой код, похожий на автозаполнение, заполнял имя при выборе кода. введите описание изображения здесь 

class Matriculas extends Component {
  state = {
    status: "initial",
    data: []

  }
       componentDidMount = () => {
     this. getInfo()
     }

  getInfo= async () => {
    try {
      const response = await getAll('matriculas')
      console.log(response.data)
      this.setState({
        status: "done",
        data: response.data

      });
    } catch (error) {
      this.setState({
        status: "error"
      });
    }
  };
  render() {
    const data = [...this.state.data];
    return (

    <Container>
      <RowContainer margin="1px" >
        <ColumnContainer margin="10px">
          <h3>Info</h3>
          <label>Codigo</label>
          <Input
            width='150px'
            type="text"
            placeholder="Digite el codigo"
            value={data.codigo } ref="codigo" />
          <label>Nombre</label>
          <Input
            width='150px'
            type="text"
            placeholder="Nombre completo"
            value={data.nombre} />
        </ColumnContainer>
      </RowContainer>
    </Container>

    )
  }
};

export default Matriculas;

1 Ответ

0 голосов
/ 30 октября 2018

Скорее всего, вы захотите использовать реагировать на выбор

Вы можете передавать опции в select (которые будут вашими именами), и он будет возвращать значения, которые соответствуют тому, что вы вводитев строке поиска. 

import Select from 'react-select'

const options = [
  { value: 'mike', label: 'Mike' },
  { value: 'john', label: 'John' },
  { value: 'vanessa', label: 'Vanessa' }
]

const MyComponent = () => (
  <Select options={options} />
)

Таким образом, вы можете взять этот пример и примеры в ссылке и вставить его в свой код: 

import Select from 'react-select'

<Container>
      <RowContainer margin="1px" >
        <ColumnContainer margin="10px">
          <h3>Info</h3>
          <label>Codigo</label>
          <Input
            width='150px'
            type="text"
            placeholder="Digite el codigo"
            value={data.codigo } ref="codigo" />
          <label>Nombre</label>
          <Select 
           value={this.state.nameValue}
           onChange={event => {this.setState({nameValue: e.value})}
           options={options} />
        </ColumnContainer>
      </RowContainer>
    </Container>

При использовании onChage возвращаетсяevent, который имеет значение выбранного имени.Вы можете использовать это, чтобы установить nameValue состояния, а затем использовать это значение имени в остальной части вашего компонента.

После того, как вы запустите это, также стоит посмотреть на async select , который позволяет вам предоставить асинхронную функцию, которая возвращает значения (например, ваша getInfo функция)

- edit -

Если вы хотитечтобы определить событие onChange в другом месте, оно будет выглядеть следующим образом: 

handleChange = event => {
  // event.value will be the value of the select
  this.setState({optionSelected: event.value});
}

, а затем в вашем onChange скажите, что это функция, которую вы хотите, но не не вызывает ее (ненаписать в скобках): 

<Select 
   value={this.state.optionSelected}
    onChange={this.handleChange}
    options={options} />
...