提交后表单无法重置 ReactJS Flux

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() {

正在将所需数据传递给子组件。 return }

  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

Form Fails to Reset Upon Submission ReactJS Flux

forms

reactjs

reactjs-flux

react-native