如何使用react将输入标签中的字符串存储在变量中？

Question

I'm a beginner react js user and I want to store a string from input tag in a variable. Then I want the string stored in the variable to be connected with API URL as shown below

`

const [stats, setStats] = useState([]);

const ID="";

useEffect(() => {
    axios
      .get(`https://fortnite-api.com/v2/stats/br/v2/${ID}`)
      .then(res => {
        setStats(res.data);
        console.log(res.data);
      })
      .catch(error => console.log(error));
  }, []);

return (
    <div>
       <h1>Search a Player</h1>
    <form>
      <input
        type='text'
        //onChange={}
        placeholder='Search'
      />
    </form>
    </div>
)

Your help will make my day.

Answer 1

You will have to save your ID as a state variable. You can thencontrol its value based on your onChange event handler.

const [stats, setStats] = useState([]);
const [ID,setID] = useState('');

const changeId = (event) =>{
setID(event.target.value);
}

useEffect(() => {
if(ID!='') {
    axios
      .get(`https://fortnite-api.com/v2/stats/br/v2/${ID}`)
      .then(res => {
        setStats(res.data);
        console.log(res.data);
      })
      .catch(error => console.log(error));
  }
}, [ID]);

return (
    <div>
       <h1>Search a Player</h1>
    <form>
      <input
        type='text'
        onChange={(event) => {changeId(event.target.value) }
        placeholder='Search'
      />
    </form>
    </div>
)

Ensure, that your useEffect callback is only called when ID changes. So pass in ID in the dependency array . With an empty array it is called only once after component has mounted.