Реагировать - Показать новый компонент при отправке формы

Question

Может кто-нибудь сказать мне, почему SearchResult не отображается при отправке формы?

export default class Search extends React.Component {
    constructor() {
        super();
        this.state = {
            search: ""
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({
            search: event.target.value
        });
      }
    handleSubmit() {
       return <SearchResult/>
    }

    render() {
        return(
        <div>
        <form onSubmit={this.handleSubmit}>
            <label>
            Name:
            <input type="text" value={this.state.search} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" />
        </form>
        </div>
        );
    }
}

У меня не появляется никаких ошибок, когда я отправляю, страница просто перезагружается и остается в компоненте поиска, а не в компоненте SearchResult.

Спасибо

Answer 1

Вы можете установить состояние в функции handleSubmit() и изменить функцию render(), чтобы она отображала компонент в зависимости от критериев

export default class Search extends React.Component {
    constructor() {
        super();
        this.state = {
            search: "",
            submitted: false
        }

handleSubmit() {
  this.setState({
   submitted: true
  })
}

render() {
  if(this.state.submitted) {
    return <SearchResult/>
  }

  return(
    <div>
    <form onSubmit={this.handleSubmit}>
   <label>
   Name:
   <input type="text" value={this.state.search} onChange={this.handleChange} />
   </label>
   <input type="submit" value="Submit" />
   </form>
  </div>
  );
    }

Answer 2

Ваш компонент не выполняет повторную визуализацию при отправке формы, и вы фактически не возвращаете SearchResult в самом методе визуализации.

Я бы просто добавил showResults Свойство для вашего состояния и если true, отображать результаты вместо формы.

Кроме того, не забудьте перезагрузить страницу, используя event.preventDefault в handleSubmit функция.

Ваш код будет выглядеть так:

export default class Search extends React.Component {
    constructor() {
        super();
        this.state = {
            search: "",
            showResults: false
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({
            search: event.target.value
        });
      }
    handleSubmit(e) {
       e.preventDefault()
       this.setState({...this.state, showResults: true});
    }

    render() {
        if(this.state.showResults){
            return <SearchResult />
        }
        else{
            return(
                <div>
                <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.search} onChange=. 
                    {this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
            </div>
            );
        }
    }
}

Answer 3

В React вы можете создавать отдельные компоненты, которые инкапсулируют необходимое вам поведение. Затем вы можете отобразить только некоторые из них, в зависимости от состояния вашего приложения.

Итак, сначала добавьте новое свойство состояния, например:

this.state = { search: "", isSubmitted: false };

Затем обновите метод handleSubmit(), как :

handleSubmit() {
   this.setState({isSubmitted: true});
}

Затем, наконец, обновите функцию render(), например:

render() {

    const isSubmitted = this.state.isSubmitted;

    let content;
    if (isSubmitted) {
      content = <SearchResult/>;
    } else {
      content = (
        <form onSubmit={this.handleSubmit}>
            <label>
            Name:
            <input type="text" value={this.state.search} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" />
        </form>
      );
    }

    return <div>{content}</div>;
}

---

Для получения дополнительной информации:

• Условное отображение в Реакция