如何使用ReactJS获取用户输入字段的值

Question

我正在尝试根据用户输入字段获取api数据。如何获取这些数据的值？

我的api终点是这样的"http://localhost:8000/api/p_list?search=".每当用户输入值时，端点都是这样的"http://localhost:8000/api/p_list?search=01这里的输入字段值是"01"。我想得到结果的值。

我可能是reactjs的新手。我尝试了下面这样的东西，但这是我试图获取的静态API url。我不知道如何根据用户输入字段获取动态url。

如果有人能帮我解决我想解决的问题，那就太好了。事先非常感谢。

/src/productList.js

import React, {Component} from "react";
import Contacts from './productListHook.js';

export default class App  extends Component{
state = {
contacts: []
}
componentDidMount() {
fetch('http://localhost:8000/api/p_list?search=')
.then(res => res.json())
.then((data) => {
this.setState({ contacts: data })
})
.catch(console.log)
}
render(){
return(
<Contacts contacts={this.state.contacts} />
)
}
}

/src/ProductListHook.js

import React from 'react'
const Contacts = ({ contacts }) => {
return (
<section class="product_list section_padding">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="product_sidebar">
<div class="single_sedebar">
<form action="#">
<input type="text" name="#" placeholder="Search keyword"/>
<i class="ti-search"></i>
</form>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="product_list">
<div class="row">
{contacts.map((contact) => (
<div class="col-lg-3 col-md-9">
<div class="single_product_item">
<img src={contact.image} alt="" class="img-fluid" />
<h3> <a href={contact.url}>{contact.title}</a> </h3>
<p>From ${contact.price}</p>
</div>
</div>
))}
</div>
<div class="load_more_btn text-center">
<a href="#" class="btn_3">Load More</a>
</div>
</div>
</div>
</div>
</div>
</section>
)
};
export default Contacts

Answer 1

嗨，请检查这个完整的例子：它使用文本框从用户那里获取用户id，点击按钮后，它用该用户id调用api，并获取该用户的所有帖子。之后，它会在屏幕上显示所有的帖子标题。

import React, {useEffect, useState} from "react";
import axios from 'axios';
function PostListPageByUser() {
const [posts, setPost] = useState([]);
const [userId, setUserId] = useState([]);
let signal = axios.CancelToken.source();
function handleChange(event) {
setUserId(event.target.value);
}
function handleClick(event) {
axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`, {
cancelToken: signal.token,
})
.then(res => {
const posts = res.data;
setPost(posts);
}).catch(err => {
console.log(err);
});
}
return (
<React.Fragment>
<span>Enter User Id</span>
<input type="text" onChange={handleChange}/>
<button onClick={handleClick}>Get Posts By User</button>
<ul>
{
posts.map(post => <li key={post.id}>{post.title}</li>)
}
</ul>
</React.Fragment>
);
}
export default PostListPageByUser;

根据您对我的回答的评论，我在表单提交中添加了这个例子：

import React, {useEffect, useState} from "react";
import axios from 'axios';
function PostListPageByUser() {
const [posts, setPost] = useState([]);
const [userId, setUserId] = useState([]);
let signal = axios.CancelToken.source();
function handleChange(event) {
setUserId(event.target.value);
}
function handleSubmit(event) {
event.preventDefault();
axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`, {
cancelToken: signal.token,
})
.then(res => {
const posts = res.data;
setPost(posts);
}).catch(err => {
console.log(err);
});
}
return (
<form onSubmit={handleSubmit}>
<span>Enter User Id</span>
<input type="text" onChange={handleChange}/>
<button type="submit">Get Posts By User</button>
<ul>
{
posts.map(post => <li key={post.id}>{post.title}</li>)
}
</ul>
</form>
);
}
export default PostListPageByUser;

Answer 2

您的Contacts组件有输入，但API调用是在其父App组件中进行的。

您需要做的是将另一个prop传递给Contacts，这是一个函数，每次Contacts内的输入状态发生变化时都会调用它。

示例：

class App extends React.Component {
...
search(inputValue){
fetch(`http://localhost:8000/api/p_list?search=${inputValue}`)
.then(res => res.json())
.then((data) => {
this.setState({ contacts: data })
})
.catch(console.log)
}
render() {
<Contacts contacts={this.state.contacts} onSearch={search}/>
}

现在在Contacts组件内部：

const Contacts = ({contacts, onSearch}) => {
const [search, setSearch] = useState('');
return (
...
<input onChange={
(e) => {
setSearch(search);
onSearch(e.currentTarget.value);
}
} value={search} .../>
...
)
}

我只是写了概念代码来让它发挥作用，它缺少bind和关于您的项目的其他具体实现。

我强烈建议您在onSearch函数中实现一个逻辑来延迟API调用，因为它将在输入中键入的新字母中触发。这可能会使api过载。

希望能有所帮助。