如何通过单击REACT.js中的按钮来更改表单字段？

Question

我有signup.jsx

import React from "react"
import { render } from "react-dom"

import SignupContainer from "./containers/SignupContainer"

class Signup extends React.Component {
  user(){
   this.props.type='user';
  }
  hotel(){
   this.props.type='hotel';
  }
  render() {

    return (
  <div>
  Registration Type :
  <br></br>
  <button onClick={this.user}>user</button>
  <button onClick={this.hotel}>hotel</button>
  <SignupContainer type={this.props.type}/>  
     <h1>Signup</h1>
     </div>
    );
  }
}

render(<Signup type='user'/>, document.getElementById('Signup'))

我的SignupContainer.jsx

import React from "react"

import Headline from "../components/Headline"

export default class SignupContainer extends React.Component {
  render() {
  if(this.props.type=='user'){
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-12">
            <form action="/loginapp/" method="POST">
                
                
            First Name:
            <input type="text"  name="first_name">
            </input>

            <br></br>
            Last Name:
            <input type="text"  name="last_name"/>
            <br></br>
            Gender:  
            <input type="radio" name="gender" value="male" />Male
           <input type="radio" name="gender" value="female" /> Female
            <br></br>
                
            <input type="submit" value="Submit"/>
            </form>
          
          </div>
        </div>
      </div>
    );
    } else if(this.props.type=='hotel'){
        return(<h1>{this.props.type}</h1>);
    }
  }
}

我想要的是，当我点击用户按钮时，它应该显示注册表单，当我点击酒店按钮时，它应该打印酒店而无需重新加载页面。

Answer 1

尽量不要在组件挂载后更改自身组件的props。而是使用状态。

import React from "react"
import {render} from "react-dom"

import SignupContainer from "./containers/SignupContainer"

class Signup extends React.Component {
  constructor(props){
    super(props);
    this.state = {type : this.props.type};
  }
  
  user() {
    this.setState({type: 'user'});
  }
  hotel() {
    this.setState({type: 'hotel'});
  }
  render() {

    return ( <div >
      Registration Type:
      <br /> 
      <button onClick={this.user}>user</button >
      <button onClick = {
        this.hotel
      } > hotel </button>
     <SignupContainer type={this.state.type}/ >
      <h1> Signup </h1>
         </div>
    );
  }
}

render( < Signup type = 'user' / > , document.getElementById('Signup'))

Answer 2

在 React 中，props 从 parent 传递到 child，应该被认为是不可变的。另一方面，state 由组件内部使用，可以用 this.setState() 更新，这会触发 re-render。另外，当使用原生JavaScript classes时，如果你想让this引用[=26=，你需要将class方法绑定到class ].所以在你的情况下，这样的事情应该有效：

class Signup extends React.Component {
      constructor(props) {
        super(props);
        this.state = { // this is your default state
          type: 'user'
        }
      }

      user() {
        this.setState({
          type: 'user'
        })
      }

      hotel() {
        this.setState({
          type: 'hotel'
        })
      }

      render() {
        return ( < div >
          Registration Type:
          < br > < /br>
            <button onClick={this.user.bind(this)}>user</button >
            <button onClick = {this.hotel.bind(this)}>hotel</button>
            <SignupContainer type={this.state.type} />
            <h1> Signup </h1>
            </div>
        );
      }
    }

    render( < Signup type = 'user' / > , document.getElementById('Signup'))

如何通过单击REACT.js中的按钮来更改表单字段？

How to change the form fields by clicking the button in REACT.js?

reactjs

web-frontend