Question

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

这里是孩子的密码

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 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/>

Answer 1

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

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

Answer 2

我认为您尚未将TextField与状态值绑定，

<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"
/>

Answer 3

我认为您忘记了将value字段放在TextField中。试试：

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

Answer 4

您的渲染函数应该是这样的，其中Textfield值来自状态。

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>
);

}

在React中提交后无法清空输入字段

4 个答案: