代码之家 › 专栏 › 技术社区 › KellyTheDev

仅当我从表单提交时呈现react组件

reactjs javascript

KellyTheDev · 技术社区 · 7 年前

在表单数据提交后,我很难将自己的头绕到只呈现组件上。

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

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

其思想是onsubmit将一些数据转储到 Results 组件仅在提交时。

现在我要说的是,这个应用程序的价值已经在它的状态中了:

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

所以,我只希望它在用户单击submit按钮并执行onsubmit方法时呈现或重新呈现这个对象。

很抱歉,这不是为我点击,但任何建议或方向将是可怕的!

谢谢, 凯莉

3 回复 | 直到 7 年前

fsl 7 年前

你能在提交结束时标记完成状态并有条件地呈现结果吗?类似于:

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

Farooq Hanif 7 年前

您需要执行以下操作:

在组件状态中有一个布尔值以指示窗体是否是否提交。默认情况下,应将其设置为false。当用户单击submit时,应该将其更新为true。
将此布尔值传递到props中的result组件。
在“结果”组件中,检查“渲染”中此属性值的值方法,并返回适当的jsx(div和嵌套的子级或空div)。
提交完成后,将布尔值设置回false。

DÅ¾enis H. 7 年前

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

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