Как изменить поля формы, нажав кнопку в 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(){ 
 
    \t this.props.type='user'; 
 
    } 
 
    hotel(){ 
 
    \t this.props.type='hotel'; 
 
    } 
 
    render() { 
 

 
    return (
 
\t \t <div> 
 
\t \t Registration Type : 
 
\t \t <br></br> 
 
\t \t <button onClick={this.user}>user</button> 
 
\t \t <button onClick={this.hotel}>hotel</button> 
 
\t \t <SignupContainer type={this.props.type}/> 
 
    \t <h1>Signup</h1> 
 
    \t </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

В React, props передаются от родителей к ребенку, и его следует рассматривать неизменны. С другой стороны, state используется внутренними компонентами и может быть обновлен с помощью this.setState(), который запускает повторную визуализацию. Кроме того, при использовании собственных классов JavaScript вам необходимо привязать методы класса к классу, если вы хотите, чтобы this ссылался на класс. Так что в вашем случае, что-то, как это должно работать:

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

Answer 2

Постарайтесь не менять реквизит собственного компонента после установки компонента. Вместо этого используйте состояния.

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> 
 
    \t <SignupContainer type={this.state.type}/ > 
 
     <h1> Signup </h1> 
 
     \t </div> 
 
    ); 
 
    } 
 
} 
 

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