OnClick не вызывает функцию - PullRequest
Новая
       17

OnClick не вызывает функцию

1 голос
/ 09 октября 2019

Я хотел бы изменить div, когда событие onclick вызывает функцию, но она не работает. Мне бы хотелось, чтобы, когда я нажимал на кнопку, она вызывала функцию botaoContinuar (). Функция botaoContinuar () должна вызывать другую функцию (finalizarOuNao ()). Функция finalizarOuNao () должна показывать / вызывать функцию -continuar () -. Вся эта работа, чтобы показать div внутри функции continuear (). Но это не работает, кто-то, кому нравится React, может мне помочь? спасибо 

import React from 'react';
import logo from './logo.svg';
import './App.css';
import PropTypes from 'prop-types';
import styled from "styled-components";


function finalizarOuNao (props) {
  if (props.finalizarET1) {
    return (<continuar/>)
  }
}

function continuar (props) {
  return (
    <div>
      <p> Por que você não terminou um curso de graduação?</p>
         <input type="text"/>
         <p> Você fez algum curso complementar? </p>
      <select>
        <option>Curso Técnico</option>
        <option>Curso de Inglês</option>
        <option>Não fiz curso complementar</option>
      </select>
      <button>Finalizar</button>
  </div>
  )
}

function finalizar (props) {
  return (
    <div>
      <h1>O FORMULÁRIO ACABOU</h1>
      <h2>Muito obrigado por particiupar! Entraremos em contato!</h2>
    </div>
  )

}

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
         escolhasDeEscolaridade : "Ensino Médio Completo",    
         finalizarET1 :false,       
    }
  }

    escolhasDeEscolaridade= (event) => {
      this.setState({ escolhasDeEscolaridade: event.target.value });
      console.log ("oi,testando")
    }

    botaoContinuar = () => {
      function continuar() {
        return (
          <div>
            <p> Por que você não terminou um curso de graduação?</p>
               <input type="text"/>
               <p> Você fez algum curso complementar? </p>
            <select>
              <option>Curso Técnico</option>
              <option>Curso de Inglês</option>
              <option>Não fiz curso complementar</option>
            </select>
            <button>Finalizar</button>
        </div>
        )
      } 
      console.log ("me chamaram")
    }

    botaoFinalizar = ()=> {
    this.setState({finalizarET1 : !this.stste.finalizarET1})
    }

    render() {
      let escolha;     
      return (

        <div>
          <div>
            <p> Qual seu nome?</p>
            <input type="text"/>
            <p> Qual sua idade?</p>
            <input type="text"/>
            <p> Qual seu email?</p>
            <input type="text"/>
            <p> Qual sua escolaridade?</p>
            <select value={this.state.value} onChange={this.escolhasDeEscolaridade}>
              <option id=" EMC" value="Ensino Médio Completo">Ensino Médio Completo</option>
              <option id=" EMI" value="Ensino Médio Incompleto">Ensino Médio Incompleto</option>
              <option id=" ESC" value="Ensino Superior Completo">Ensino Superio Completo</option>
              <option id=" ESI" value="Ensino Superior Incompleto">Ensino Superior Incompleto</option>
            </select>
            <botaoContinuar finalizarET1={this.state.finalizarET1} />
            <button onClick = {this.botaoContinuar} >continuar</button>
          </div>
        {escolha}
        </div>
      );
    }


}
    //<finalizarOuNao finalizarET1={this.state.finalizarET1} />

export default App;

Ответы [ 2 ]

1 голос
/ 09 октября 2019

У вас есть функция внутри функции, и вы ее не вызываете. 

botaoContinuar = () => {
      function continuar() {

То, что вы описали для этого, вы можете вызвать как: 

botaoContinuar = () => {
  function continuar() {
  }
  this.finalizarOuNao()
  continuar()
}
0 голосов
/ 09 октября 2019

Пожалуйста, проверьте ниже пример кода. пожалуйста, обратитесь к вашей системе. 

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     input: ''
    }
    this.handleclick = this.handleclick.bind(this);
    this.handleClick2 = this.handleClick2.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleclick(e) {
    console.log('Button value :', e)
  };
  
  handleChange(e) {
    this.setState({ input: e.target.value });
  };

  handleClick2() {
    console.log("Test box value : ", this.state.input);
  };
  
  render() {
    return (
      <div>
        <input type="button" onClick={() => {this.handleclick("abc")}} value="Button"/>
        <br/>
        Or
        <br/>
        
        <input type="text" onChange={(e) => {this.handleChange(e)}} />
        <input
          type="button"
          value="Alert the text input"
          onClick={() =>{this.handleClick2()}}
        />
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>
...