Отображать всю информацию, введя идентификатор в поле ввода

#javascript #reactjs

Вопрос:

Я пытаюсь получить имя и фамилию массива, введя идентификатор в поле ввода. Это мой массив:

 {id: 1, name: 'Jon', surname: 'Doe'},
{id: 2, name: 'Ted', surname: 'Doe'},
{id: 3, name: 'James', surname: 'Jordan'}

Как это должно выглядеть

Как это должно выглядеть

onHandleCurretUser

 onHandleCurrentUser(userId){
    const data = {userId: userId}
    fetch("http://localhost:3000/api/user",{
        method:'POST',
        headers: {"Content-Type":"application/json"},
        body: JSON.stringify(data)
    })
    .then(res=> res.json())
    .then(result =>{
        this.setState({
            isLoaded:false,
            currentUser:result
        })
    })
    .catch(e=>console.log(e))
}

Чего я добился, так это того, что вы можете жестко закодировать одно значение для вашей кнопки, в этом примере это значение id: 1. Он всегда будет отображать жестко закодированное значение.

 <input type="number" name="userId"/>
<button onClick={e => this.onHandleCurrentUser(1)}>Show user</button>
<div>
    {
        currentUser amp;amp; <div>{currentUser.name}{currentUser.surname}</div>
    }
</div>

1. Попробуйте это с помощью асинхронной функции. Например, onHandleCurrentUser = async (идентификатор пользователя) => { if (идентификатор пользователя){… извлекать пользовательские данные }]

Ответ №1:

Вам нужен способ доступа к значению input элемента при каждом щелчке button . Вы можете сделать это, присвоив input элементу значение a controlled component , что означает, что значение input элемента будет определяться состоянием компонента.

Таким образом, вы можете использовать значение input при button нажатии и передать input значение this.onHandleCurrentUser методу.

Чтобы сделать input элемент контролируемым компонентом, внесите следующие изменения в свой компонент:

Добавьте пару ключ-значение в state , которая будет представлять значение input элемента
```
 this.state = {
   inputValue: ''
}
  
```
Установите значение value атрибута input элемента равным значению состояния, созданному на шаге 1.
```
 <input type="number" name="userId" value={this.state.inputValue}/>
  
```
Добавьте onChange обработчик событий, который будет обновлять state при input изменении значения.
```
 handleChange = (event) => {
    const { value } = event.target;
    this.setState({ inputValue: value });
}
  
```
и установите этот метод в качестве обработчика onChange события для input элемента.
```
 <input
   type="number"
   name="userId"
   value={this.state.inputValue}
   onChange={this.handleChanage}
/>
  
```

Теперь вы можете изменить функцию обработки событий onClick события на button элементе, чтобы использовать значение input элемента из state .

 <button 
   onClick={e => this.onHandleCurrentUser(this.state.inputValue)}
>
  Show user
</button>

или вы могли бы просто использовать input значение из state непосредственно в this.onHandleCurrentUser методе и просто передать ссылку на this.onHandleCurrentUser метод на onClick событие

 <button onClick={this.onHandleCurrentUser}>Show user</button>

Ответ №2:

Я думаю, вам не следует ничего передавать в onHandleCurrentUser() и вместо этого использовать getElementById().value, чтобы получить значение поля ввода и использовать этот идентификатор для создания переменной данных.

 <input type="number" name="userId" id="ID"/>
<button onClick={e => this.onHandleCurrentUser()}>Show user</button>

onHandleCurrentUser(){
var inputVal = document.getElementById("ID").value;
const data = {userId: parseInt(inputVal,10)}//Convert string to int
fetch("http://localhost:3000/api/user",{
    method:'POST',
    headers: {"Content-Type":"application/json"},
    body: JSON.stringify(data)
})
.then(res=> res.json())
.then(result =>{
    this.setState({
        isLoaded:false,
        currentUser:result
    })
})
.catch(e=>console.log(e))

}