Reactjs 我想在单击过滤器按钮后清除文本字段

在此代码中，我无法清除这两个文本字段，即使我通过

this.Search

功能单击filter后将其状态设置为空

   import React from 'react' import Axios from './Axios' import
   './index.css' export default class Practise extends React.Component {
       constructor(props) {
           super(props)
   
           this.state = {
               lists: [],
               names: '',
               emails: '',
               arr: [],
              
           }
   
           this.Search = (names, emails) => {
               const arr = this.state.lists.filter(item => {
                   
              if (item.name.includes(this.state.names) && item.email.includes(this.state.emails)) {
                      return true
                   } else {
                       return false
                   }
                   
               })
               this.setState({names:''})
               this.setState({emails:''})
               console.log(arr)   
           }
       }
   
           componentDidMount() {
               Axios.get('/comments').then(response => {
               // console.log(response.data, 'data')
               this.setState({ lists: response.data })
           }).catch(response => {
               console.log(response, 'Errored!!!')
               this.setState({ errored: 'Error has Occured' })
           })
       }
          render() {
           const { lists, arr, names, emails } = this.state
           return (
               <>
               <div >
                   <input type='text' onChange={(e) => this.setState({ names: e.target.value })} />
                  <input type='text' onChange={(p) => this.setState({ emails: p.target.value })} />
                   <button  onClick={()=>this.Search()}>Filter</button>
               </div>
       
                <div>
   
                       {lists.length ? lists.map(item =>
                           <div className='divone' key={item.id}>
                               Id:- {item.id} <br />
   
                               Name:- {item.name} <br />
   
                               Email:- {item.email}</div>) : null}
                   </div>
               </>
           )
       }
   
   };

import React from'React'导入Axios from./Axios'导入
“./index.css”导出默认类组件{
建造师（道具）{
超级（道具）
此.state={
列表：[]，
名称：“”，
电子邮件：“”，
arr:[]，
}
this.Search=（姓名、电子邮件）=>{
const arr=this.state.lists.filter（项=>{
if（item.name.includes（this.state.names）和&item.email.includes（this.state.emails））{
返回真值
}否则{
返回错误
}
})
this.setState（{names:'}）
this.setState（{emails:'}）
控制台日志（arr）
}
}
componentDidMount（）{
get（'/comments'）。然后（response=>{
//console.log（response.data，“data”）
this.setState（{lists:response.data}）
}).catch（响应=>{
console.log（响应“Errored！！！”）
this.setState（{errored:'Error has occurrent'}）
})
}
render（）{
const{lists，arr，names，email}=this.state
返回(
this.setState（{names:e.target.value}）}/>
this.setState（{emails:p.target.value}）}/>
this.Search（）}>过滤器
{lists.length？lists.map（项=>
Id:-{item.Id}

名称：-{item.Name}

电子邮件：-{item.Email}）：null}
)
}
};

您必须将值prop添加到两个输入中。然后， 如果将状态更改为空字符串，则输入值也将变为空-

<input type='text' value={this.state.names} onChange={(e) => this.setState({ names: e.target.value })} />
       <input type='text' value={this.state.emails} onChange={(p) => this.setState({ emails: p.target.value })} />

this.setState（{names:e.target.value}）}/>
this.setState（{emails:p.target.value}）}/>

它应该会起作用