Reactjs Can'；t在React中提交后清空输入字段

我在堆栈溢出上尝试了一些类似的解决方案，但似乎没有任何效果，这是一个小问题，根据代码，它应该可以工作，唯一让我困惑的问题是，在我提交表单应用程序控件后，可能会将其交给父类，上一级与状态无关，我的setState方法是在子组件中的this.props.api方法之后调用的，我希望有人能在这方面帮助我

这是来自CHILD的代码

class UserInput extends Component{
    constructor(props){
        super(props)
        this.state = {
            value: ''
        }
    }

    handleChange = (event) => {
        this.setState({value: event.target.value});
    }  

    onFormSubmit = (e) => {
        e.preventDefault();
        this.props.api(this.state.value);
        this.setState({
            value:''
          });
    }

    render(){
        return (
            <div>
                <form noValidate autoComplete="off" onSubmit={this.onFormSubmit}>
                <TextField onChange={this.handleChange}
                    id="outlined-name"
                    label="Image Search"
                    margin="normal"
                    variant="outlined"
                    style={{minWidth:'500px'}}
                    type="text"
                    /><br></br>
                    <Button 
                    variant="contained" 
                    color="primary"
                    type="submit"
                    >

class用户输入扩展组件{
建造师（道具）{
超级（道具）
此.state={
值：“”
}
}
handleChange=（事件）=>{
this.setState（{value:event.target.value}）；
}  
onFormSubmit=（e）=>{
e、 预防默认值（）；
this.props.api（this.state.value）；
这是我的国家({
值：“”
});
}
render（）{
返回(

这是来自父类的代码

class App extends React.Component {

  async onFormSubmit(term){
    const res = await axios.get('https://api.unsplash.com/search/photos', {
      params:{query: term},
      headers:{
          Authorization: 'Client-ID'
      }
    });
    console.log(res.data.results)
  }


  render(){
    return (
      <div className="App">
      <UserInput api={this.onFormSubmit}/>
      <List/>

类应用程序扩展了React.Component{
异步onFormSubmit（术语）{
const res=等待axios.get（'https://api.unsplash.com/search/photos', {
参数：{query:term}，
标题：{
授权：“客户端ID”
}
});
console.log（res.data.results）
}
render（）{
返回(

我认为您没有将

文本字段

与状态值绑定

<TextField 
    onChange={this.handleChange}
    value={this.state.value}  //Provide value here
    id="outlined-name"
    label="Image Search"
    margin="normal"
    variant="outlined"
    style={{minWidth:'500px'}}
    type="text"
/>

---

我想你忘了把value字段放在TextField中。 尝试：

---

您没有设置输入字段的值，因为文本字段的值与状态值没有绑定，因此不会更新文本字段的值

<TextField
    value = {this.state.value}
/>

---

渲染函数应该是这样的，其中Textfield值来自state

render() {
const { value } = this.state;
return (
  <div>
    <form noValidate autoComplete="off" onSubmit={this.onFormSubmit}>
      <TextField
        onChange={this.handleChange}
        id="outlined-name"
        label="Image Search"
        margin="normal"
        variant="outlined"
        value={value}
        style={{ minWidth: "500px" }}
        type="text"
      />
      <br />
      <button variant="contained" color="primary" type="submit" />
    </form>
  </div>
);

render（）{
const{value}=this.state；
返回(


);

---

}

确切地说，你的问题是什么？在提交表单后，我想清空输入字段，你使用状态值吗？它甚至不到文本字段。请考虑用你的答案添加一些解释。当然……没有与文本字段的值绑定到状态值，所以它没有更新文本字段的值……我将C。下次再考虑。：）谢谢你花时间：）你能编辑你的答案并把它们添加到那里吗。

render() {
const { value } = this.state;
return (
  <div>
    <form noValidate autoComplete="off" onSubmit={this.onFormSubmit}>
      <TextField
        onChange={this.handleChange}
        id="outlined-name"
        label="Image Search"
        margin="normal"
        variant="outlined"
        value={value}
        style={{ minWidth: "500px" }}
        type="text"
      />
      <br />
      <button variant="contained" color="primary" type="submit" />
    </form>
  </div>
);