Реагировать JS: Как вызвать функцию для возврата кода JSX? - PullRequest
Новая
       4

Реагировать JS: Как вызвать функцию для возврата кода JSX?

0 голосов
/ 06 апреля 2020

Я новичок в реакции и пытаюсь создать элемент JSX в функции. JSX должен динамически добавлять 2 кнопки каждый раз, когда вы нажимаете кнопку. Однако, когда render () вызывает эту функцию, она не отображает элемент (белая страница в браузере).

Как мне go исправить это? Любая помощь будет оценена. Спасибо! 


class Test extends Component {
  constructor(){
    super();
    this.state = {
        fields: [{key:'key', val:'val'}]
    }
    this.renderPanel = this.renderPanel.bind(this);
  }

  addField() {
    this.setState({
      fields: [...this.state.fields, {key:'key', val:'val'}],
    })
  }

  renderPanel(){
      return <div>
      <form>
          <div id="testingAPanel">
              {()=>this.state.fields.map((input,index) => {return(
                  <tr>
                  <input type='button' id={index} value={input.key} />
                  <input type='button' id={index} value={input.val} />
                  <br/>
                  </tr>
                  )}
              )}

          </div>
      </form>
      <button onClick={ () => this.addField() }>
          CLICK ME TO ADD AN INPUT
      </button>
  </div>
  }

  render() {
    return (
        <div class = 'test'>
            {()=>this.renderPanel()}
        </div>      
    );
  }
}

export default Test;```

1 Ответ

0 голосов
/ 07 апреля 2020 

class App extends React.Component {
  
  buttonClick(){
    console.log("came here")
    
  }
  
  subComponent() {
    return (<div>Hello World</div>);
  }
  
  render() {
    return ( 
      <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
          {this.subComponent()}
       </div>
     )
  }
  


}

ReactDOM.render(<App/>, document.getElementById('app'));
<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="app"></div>

это зависит от ваших потребностей, вы можете использовать либо this.renderIcon(), либо bind this.renderIcon.bind(this)

ОБНОВЛЕНИЕ

Так вы вызываете метод вне рендера. 

buttonClick(){
    console.log("came here")
}

render() {
   return (
       <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
       </div>
   );
}

Рекомендуется написать отдельный компонент и импортировать его.

...