Вопрос по javascript, reactjs – Реагировать на справочную функцию JS в другом компоненте

8

Я пытаюсь получить кнопку, отображаемую через другой компонент, для ссылки и / или влияния на состояние другого компонента.

var Inputs = React.createClass({
  getInitialState: function(){
    return {count: 1};
  },
  add: function(){
    this.setState({
      count: this.state.count + 1
    });
  },
  render: function(){
    var items = [];
    var inputs;
      for (var i = 0; i < this.state.count; i++){
        items.push();
        items.push(<br>);
      }
    return (
      
        
          {items}
          
        
      
     );
   }
 });

Я хочу написать новый компонент, который будет иметь доступ к функции добавления в Inputs. Я пытался ссылаться на это напрямуюInputs.add как это:

var Add = React.createClass({
  render: function(){
    return (
      
    );
  }
});

Но это нет работа. Как бы я мог получить доступ к компоненту?s функционирует через другой компонент или влияет на состояние компонента через другой компонент? Благодарю.

Ваш Ответ

2   ответа
1

renderComponent

var Inputs = React.createClass({…});
var myInputs = React.renderComponent(Inputs);
myInputs.add();

Единственный способ получить дескриптор экземпляра React Component вне React - сохранить возвращаемое значение React.renderComponent.Источник.

10

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

/** @jsx React.DOM */

var Inputs = React.createClass({

    render: function () {
        var items = [];
        var inputs;
        for (var i = 0; i < this.props.count; i++) {
            items.push( <input type="text" name="{[i]}">);
            items.push(<br>);
        }
        return ( 
            <div classname="col-md-9"> 
                <form action="/" method="post" name="form1"> 
                    {items} 
                    <input type="submit" classname="btn btn-success" value="Submit Form">            
                </form>
            </div> 
       );
    }
});

var Add = React.createClass({
    render: function () {
        return (<input type="button" classname="btn" value="Add an Input" onclick="{this.props.fnClick}/"> );
  }
});

var Parent = React.createClass({
    getInitialState: function(){
        return {count:1}
    },
    addInput: function(){
        var newCount = this.state.count + 1;
        this.setState({count: newCount});
    },
    render: function(){
        return (
            <div>
                <inputs count="{this.state.count}"></inputs>
                <add fnclick="{this.addInput}/">
            </add></div>
        );
    }
});

React.renderComponent(<parent></parent> , document.body);

jsFiddle

Я уже настроил компонент parent-child, но у меня возникли проблемы со спецификой того, как заставить ребенка использовать родительский компонент ».с функцией. Этот ответ помог мне с передачей функции в качестве метода поддержки, так что спасибо. redlena

Похожие вопросы