Question

我试图在ReactJS中提交表单数据时重置组件的状态。除了表单无法清除之外，我怀疑如果我设法成功重置它，那么在子组件中呈现的数据一旦消失就会消失。

我想要发生的是，在表单提交时，渲染数据传递给子组件，清除和重置表单，但保留子组件呈现原始数据。然后，在下次提交时，根据传递的新数据重新渲染子组件。

这是我的代码：

class Badge extends React.Component {
  constructor(props) {
    super(props)
        this.state = {}
    }

   componentDidMount() {
        fetch('https://api.github.com/users/' + this.props.user)
        .then(data => data.json())
        .then(data => {
            this.setState({
            userData: data
          })
        })
     }

    render() {
        if (!this.state.userData) return <p>Loading...</p> 
        return (
      <div>
        <h4>{this.state.userData.name}</h4>
      </div>
       )
    }
} 

class Search extends React.Component {
    constructor(props) {
        super(props)
      this.state = {user: '', clicked: false}

    this.handleChange= this.handleChange.bind(this);
    this.handleSubmit= this.handleSubmit.bind(this);
    this.resetForm= this.resetForm.bind(this); 
    }  

    resetForm() {
    this.setState({user: '', clicked: false})
  } 

   handleChange(event) {
      this.setState({ user: event.target.value })
    } 

   handleSubmit(event) {
    this.setState({ clicked: true }) 
    alert(this.state.user + ' was submitted'); 
    {this.resetForm}
    event.preventDefault(); 
    }

    renderUserInfo() {
       return <Badge user={this.state.user} />
        }

    render() {
    return (
        <div>
        <p>Current User: {this.state.user}</p>
          <h2>
            Find a Github User
          </h2>
        <form onSubmit={this.handleSubmit}>
          <label>
            Username: 
            <input type="text" user={this.state.user} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
       {this.state.clicked && this.renderUserInfo()}
      </div>
      )
  }
}

Answer 1

由于您不希望组件在第一个组件之后每次重新呈现（仅在用户提交时），我使用的是名为sendData的变量。还使用componentWillReceiveProps来获取父级的新道具。

class Badge extends React.Component {

  constructor(props) {
    super(props)
    this.state = {}
  }
  componentWillReceiveProps(nextProps){

    if(nextProps.sendData) {
      this.setState({
        userData: ''
      });
      fetch('https://api.github.com/users/' + nextProps.user)
      .then(data => data.json())
      .then(data => {
        this.setState({
          userData: data
        });

通过传递父组件的函数形式，从子组件发生数据刷新。

        this.props.resetForm();
      })
    }
  }
  componentDidMount() {
      fetch('https://api.github.com/users/' + this.props.user)
        .then(data => data.json())
        .then(data => {
          this.setState({
            userData: data
          });
          this.props.resetForm();
        })

  }

  render() {
    if (!this.state.userData) return <p>Loading...</p>

    return (
      <div>
        <h4>{this.state.userData.name}</h4>
      </div>
    )
  }
}

class Search extends React.Component {
  constructor(props) {
    super(props)
    this.state = { user: '', clicked: false, sendData: false, }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.resetForm = this.resetForm.bind(this);
  }

  resetForm() {
    this.setState({ user: '', sendData: false })
  }

  handleChange(event) {
    this.setState({ user: event.target.value })
  }

  handleSubmit(event) {
    this.setState({ clicked: true, sendData: true })
    alert(this.state.user + ' was submitted');
    event.preventDefault();
  }

  renderUserInfo() {

将所需数据传递给子组件。返回 }

  render() {
    return (
      <div>
        <p>Current User: {this.state.user}</p>
        <h2>
          Find a Github User
          </h2>
        <form onSubmit={this.handleSubmit}>
          <label>
            Username:
            <input type="text" user={this.state.user} value={this.state.user} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
        {this.state.clicked && this.renderUserInfo()}
      </div>
    )
  }
}

提交后表格无法重置ReactJS Flux

1 个答案: