javascript - 在输入字段中输入 id 显示所有信息

Question

我试图通过在输入字段中输入 id 来获取数组的姓名。这是我的数组:

{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 && <div>{currentUser.name}{currentUser.surname}</div>
    }
</div>

Answer 1

您需要一种方法来访问 input 的值每当button时元素被点击。您可以通过设置 input 来做到这一点元素a controlled component ，表示 input 的值元素将由组件的状态驱动。

这样，您就可以使用 input 的值当button点击后即可传递input值 this.onHandleCurrentUser方法。

为了使input元素是受控组件，请在组件中进行以下更改:

1. 在 state 中添加键值对这将代表 input 的值元素

   this.state = {
      inputValue: ''
   }
   

2. 设置 value 的值input 的属性元素等于步骤 1 中创建的状态值。

   <input type="number" name="userId" value={this.state.inputValue}/>
   

3. 添加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>