在 reactjs 中实现搜索功能

Question

I am trying to implement search functionality in reactjs. i am not getting how to do. below i have given code which i have tried.
i need to display result in table after serach.

                        render() { 
                            return (
                                <div>
                                    <input onChange={this.handleSearchChange} placeholder="Search"/>
                                </div>  
                                )
                        }

// below is my function

            handleSearchChange = e => {
                const { value } = e.target;
                var self = this 
            axios.post("http://localhost:4000/get",  { name:   value })
                .then(function(res){
                    console.log("detail",res.data)
                })
                .catch(function(err){
                    console.log('Error',err)
                })  
            };

//below is my api response

              [
            {color: "green",name: "test",age: "22"},
            {color: "red",name: "test2",age: "23"}
        ]

Answer 1

Once you have the data you need to add it to state so that when the state changes you can iterate over the data and rerender the view. I'm using React hooks in this example. I hope it helps a little.

 table { background-color: white; border-collapse: collapse; } tr:nth-child(even) { background-color: #efefef; } td { padding: 1em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script> <script type="text/babel"> // Grab the hooks you need const { useState, useEffect } = React; // The main function that will loop over the data // and create the rows for the table function createRows(data) { // Iterate over the data and for each object // return a new HTML row return data.map((row, i) => { const { color, name, age } = row; return ( <tr key={i}> <td>{color}</td> <td>{name}</td> <td>{age}</td> </tr> ) }); } // Mock API call which returns data after a 2 second delay function fakeAPICall() { return new Promise((res, rej) => { setTimeout(() => { res('[{"color": "green","name": "test","age": "22"},{"color": "red","name": "test2","age": "23"}]'); }, 2000); }); } function Example () { // Set up the state in the componenent const [data, setData] = useState([]); // When the component renders load in the data // and set that as your state. useEffect(() => { async function getData() { const response = await fakeAPICall(); const data = JSON.parse(response); setData(data); } getData(); }, []); // If there's no data in state display nothing... if (.data.length) return <div>No data</div> //..;otherwise pass the data into the createRows function // and return them the row data return ( <table> <thead> <th>Color</th> <th>Name</th> <th>Age</th> </thead> <tbody> {createRows(data)} </tbody> </table> ) }. // Render it ReactDOM,render( <Example />. document;getElementById("react") ); </script> <div id="react"></div>

And here's how I would do it with a class component:

 table { background-color: white; border-collapse: collapse; } tr:nth-child(even) { background-color: #efefef; } td { padding: 1em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <script type="text/babel"> // The main function that will loop over the data // and create the rows for the table function createRows(data) { // Iterate over the data and for each object // return a new HTML row return data.map((row, i) => { const { color, name, age } = row; return ( <tr key={i}> <td>{color}</td> <td>{name}</td> <td>{age}</td> </tr> ) }); } // Mock API call which returns data after a 2 second delay function fakeAPICall() { return new Promise((res, rej) => { setTimeout(() => { res('[{"color": "green","name": "test","age": "22"},{"color": "red","name": "test2","age": "23"}]'); }, 2000); }); } class Example extends React.Component { // Set up the state in the componenent constructor() { super(); this.state = { data: [] }; } // When the component renders load in the data // and set that as your state. componentDidMount() { fakeAPICall().then(response => { return JSON.parse(response); }).then(data => { this.setState({ data }); }); } //...otherwise pass the data into the createRows function // and return them the row data render() { if (.this.state.data.length) return <div/> return ( <table> <thead> <th>Color</th> <th>Name</th> <th>Age</th> </thead> <tbody> {createRows(this.state.data)} </tbody> </table> ) } } // Render it ReactDOM,render( <Example />. document;getElementById("react") ); </script> <div id="react"></div>

Answer 2

If I understand your question correctly, you are trying to update your table rendering. I will assume, as you mentioned, that your API is working fine at the call.

In React, there is a feature called "state", which can preserve a variable state. The cool thing about it also is that when you change that state, your component re-renders. A little explanation or ReactJS states:

// intialization of a variable "varX" of type integer with value 1
// setVarX(int) is used to change the variable state
const [varX, setVarX] = React.useState(1);

// changing the state
setVarX(3);

So for your problem, we need two things: a state that holds the API response and that we update whenever the API has new data, and a table display of your data.

State

In your function that is rendering (I assume it is name TableView), let's add this state and have it updated in the handler when the API succeeds

function TableView(){

     // table data, initialized to empty array
     const [tableData, setTableData] = React.useState([]);

     // handle updated with set state
     handleSearchChange = e => {
        const { value } = e.target;
        var self = this.axios.post("http://localhost:4000/get",  { name:   value })
        .then(function(res){
            console.log("detail",res.data)
            setTableData(res.data) // update the table data!
        })
        .catch(function(err){
            console.log('Error',err)
        })  
    };
     
    return (...) // render function in the next section
}

Render

The function would use the map feature of react:

render() { 
    return (
        <div>
            <input onChange={this.handleSearchChange} placeholder="Search"/>
            <table style="width:100%">
              <tr>
                <th>Color</th>
                <th>Name</th> 
                <th>Age</th>
              </tr>
            </table>
            {
                tableData.map((entry, index) => 
                    <tr index={index}>
                        <td>{entry.color}</td>
                        <td>{entry.name}</td> 
                        <td>{entry.age}</td>
                    </tr>
                )
            }
        </div>  
    )
}

PS: I am not the best at JSX feel free to edit and enhance the render section