仅当我从表单提交时才呈现反应组件答案

【问题标题】：Only render a react component when I on submit from a form仅当我从表单提交时才呈现反应组件
【发布时间】：2018-07-13 03:13:37
【问题描述】：

我在提交表单数据后只渲染一个组件时遇到了麻烦。

所以我有一个具有基本渲染的应用程序：

(<div>
  <form onSubmit={this.onSubmit.bind(this)}>
  </form>
  <Results/>
</div>);

这个想法是 onSubmit 只会在提交时将一些数据转储到 Results 组件中。

老实说，该应用程序的值已经在其状态内：

this.state = {
  length : 0,
  timeInSeconds: 0
}

所以，我只希望它在用户单击提交按钮并执行 onSubmit 方法时呈现或重新呈现此对象。

很抱歉，这不是为我点击，但任何建议或方向都会很棒！

谢谢，凯莉

【问题讨论】：

React 组件在提供新道具或组件状态更改时重新渲染。因此，触发setState 或更改存储值应该重新渲染该组件。您能否提供更多数据，例如您的组件状态如何以及您如何将数据传递给Results 组件。

标签： javascript reactjs

【解决方案1】：

您能否在我们的 onSubmit 结束时标记完成状态并有条件地呈现结果？比如：

this.state = {
  length : 0,
  timeInSeconds: 0,
  isSubmitted: false
}

onSubmit(e) {
    // Do something
    this.setState({isSubmitted: true})
}

然后放置一个条件来渲染结果。

(<div>
  <form onSubmit={this.onSubmit.bind(this)}>
  </form>
  {this.state.isSubmitted && <Results/>}
</div>);

【讨论】：

对，我只是复制了他的渲染代码。我在 onSubmit 上进行了编辑，因为我不确定他是否真的在使用箭头函数。谢谢。
谢谢菲利普！您的{this.state.isSubmitted && <Results/>} 非常完美！我知道我忽略了一些简单的事情。在处理组件数组时，我会做这些事情。再次谢谢你！（也很抱歉耽搁了，我的事情太多了）

【解决方案2】：

您需要执行以下操作：

在组件的状态中有一个布尔值来指示表单是否是提交与否。默认情况下，它应该设置为 false。当用户点击提交时，它应该被更新为 true。
将此布尔值传递给 props 中的 Result 组件。
在 Result 组件中检查渲染中这个 prop 值的值方法，并返回适当的 JSX（带有嵌套子元素的 div 或空 div)。
提交完成后将布尔值设置为 false。

【讨论】：

【解决方案3】：

这就是我的做法。我在飞行中做了，但我很确定这就是你需要的。我希望是对的 :) 如果有帮助，请告诉我

       import React, { Component } from 'react';
       import Results from './results';

       class FormData extends component {
             constructor(props) {
             super(props);
                  this.state = {
                  name: '',
                  age: null,
                  submitted: false
                  };
                    this.onChange = this.onChange.bind(this);
                    this.onSubmit = this.onSubmit.bind(this);
                  }
                    // Let's 1st make a onChane function and get the form data 
                   onChange(e) {
                     this.setState({ [e.target.name]: e.target.value });  // Getting access to entered values
                  }

                // Let's make an onSubmit function
                  onSubmit(e) {
                    e.preventDefault();  // Here we prevent the default browser behavior
                    this.setState({isSubmitted: true}); // Let's set the new 'submitted state to TRUE

               // Gathering data in order to pass it to the <Results /> component

                    const formData = {
                      name: this.state.name,
                      age: this.state.age
                    };

                    this.props.makeResultsData(formData);  // Passing the data down as props
                  }

              // Let's render the necessary data including the results component 

           render() {
              return (

          // Little bit of destructuring
         // This is equal to const submitted = this.state.submitted
          { submitted } = this.state;  


        <div className="container">
          <form onSubmit={this.onSubmit}>
                <label>
                      Name:
                      placeholder="Enter your name"
                      name="name"
                      value={this.state.name}
                      onChange={this.onChange}
                </label>
                <label>
                      Age:
                      placeholder="Enter your age"
                      name="age"
                      value={this.state.age}
                      onChange={this.onChange}
               </label>

        // Let's finally SUBMIT our form and change the states 'submitted' value to TRUE

               <input type="submit" value="Submit" />

         </form>

// With conditional rendering ,we can now display our <Results /> component, like this

  {this.state.isSubmitted && <Results/>}  // So, if submitted = true, render the Results component

        </div>
            );
          }
        }

【讨论】：