Javascript React Js：从同级组件设置输入值

我正在学习

ReactJS

，并尝试使用它开发小型

CRUD

表单。此时，我正在尝试从其他

同级组件设置
输入值
，以执行更新

因此，如果我
在网格第一行的
编辑按钮上单击
，
组织名称
和
说明
输入框应分别获得
“abc com”
和
“公司abc”
值

var OrganizationHandler = React.createClass(
    render: function() {
        return (
            <div>
                <OrganizationAPP onOrganizationSubmit=this.handleOrganizationSubmit} />
                <OrganizationList external_DeleteOrganization={this.DeleteOrganizationFromServer} data= {this.state.data}  />
            </div>
       );
    }
});

var OrganizationList = React.createClass({
    internal_DeleteOrganization: function(id) {
        this.props.external_DeleteOrganization(id);
    },
    render: function() {
        var results = this.props.data;
        var parsed_results = results.objects;
        var that = this;
        var organizations = parsed_results.map(function(organization){
            return <Organization onDeleteOrganization={that.internal_DeleteOrganization} id={organization.id} name={organization.name} description={organization.description} />
        });

        return(
            <div>
                {organizations}
            </div>
        );
    }
});

var Organization = React.createClass({
    handleDeleteClick: function() {
        console.log(this.props);
        this.props.onDeleteOrganization(this.props.id);
    },
    handleEditClick: function () {
        alert(this.props.name);
    },
    render: function() {
        return (
            <div className="row">
                <div className="small-2 large-2 columns">{this.props.id}</div>
                <div className="small-4 large-4 columns">{this.props.name}</div>
                <div className="small-4 large-4 columns"> this.props.description}</div>
                <div className="small-2 large-2 columns">
                    <input type="button" onClick={this.handleDeleteClick} data-order={this.props.id} value="Delete" />
                    <input type="button" onClick={this.handleEditClick} data-order={this.props.id} value="Edit" />
                </div>
            </div>
        );
    }
});

var OrganizationAPP= React.createClass({
    getInitialState: function() {
        return {name: '',  description:''};
    },
    onChangename: function(e) {
        this.setState({name: e.target.value});
    },
    onChangedescription: function(e) {
        this.setState({description: e.target.value});
    },
    handleSubmit: function() {
        var name = this.refs.name.getDOMNode().value.trim();
        var description = this.refs.description.getDOMNode().value.trim();
        if (!description || !name) {
            return false;
        }

        this.props.onOrganizationSubmit('{"name":"' + name +'", "description": "' + description +'"}');
        this.refs.name.getDOMNode().value = '';
        this.refs.name.getDOMNode().value = '';
        this.setState({name: '', description: ''});
        return false;
    },
    render: function() {
        return (
            <div>
                <h1>Organization Setup:</h1>
                <form onSubmit={this.handleSubmit}>
                    <div className="row">
                        <div className="small-12 large-3 columns">
                            <label>Organization Name:</label>
                            <input type="text" ref="name" required value={this.props.name} onChange={this.onChangename}/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="small-12 large-7 columns">
                            <label>description:</label>
                            <input type="text" required ref="description" value={this.props.description} onChange={this.onChangedescription}  />
                        </div>
                    </div> 
                    <div className="row">
                        <div className="small-2 large-3  columns">
                            <button type="submit"> Add </button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
});

var OrganizationHandler=React.createClass(
render:function（）{
返回(
);
}
});
var OrganizationList=React.createClass({
内部组织：职能（id）{
本.道具.外部组织（id）；
},
render:function（）{
var结果=this.props.data；
var parsed_results=results.objects；
var=这个；
var organizations=parsed_results.map（函数（组织））{
返回
});
返回(
{组织}
);
}
});
var Organization=React.createClass({
handleDeleteClick:函数（）{
console.log（this.props）；
this.props.onDeleteOrganization（this.props.id）；
},
HandleEdit单击：函数（）{
警报（this.props.name）；
},
render:function（）{
返回(
{this.props.id}
{this.props.name}
this.props.description}
);
}
});
var OrganizationAPP=React.createClass({
getInitialState:函数（）{
返回{名称：''，说明：'}；
},
onChangename:函数（e）{
this.setState（{name:e.target.value}）；
},
onChangedescription:函数（e）{
this.setState（{description:e.target.value}）；
},
handleSubmit:function（）{
var name=this.refs.name.getDOMNode（）.value.trim（）；
var description=this.refs.description.getDOMNode（）.value.trim（）；
如果（！description | |！name）{
返回false；
}
this.props.onOrganizationSubmit（“{”name:“+name+”，“description:“+description+”）”）；
this.refs.name.getDOMNode（）.value=''；
this.refs.name.getDOMNode（）.value=''；
this.setState（{name:''，description:''}）；
返回false；
},
render:function（）{
返回(
组织设置：
机构名称：
说明：
添加
)
}
});

我已经成功地执行了
添加
和
删除
操作，但我不知道如何在同级组件的输入框中设置要编辑的值。我刚开始学习
reactjs
，我知道我的代码没有达到标准，如果你什么都不懂，请告诉我
 下面是一个示例列表编辑应用程序，其中编辑项目内容是通过父输入完成的（很容易是同级输入）

/**@jsx React.DOM*/
//React用于呈现我们的应用程序UI。
//不是为了编写应用程序。
//因此，第一步是以你喜欢的方式建立你的逻辑。
//可以是主干网、其他框架，或者像我们在这里所做的普通JS。
//我们的应用程序
变量应用={
//当我们改变时，我们会告诉这个听众
侦听器：null，
//为新数据创建ID的廉价方法
下周三:，
//预填充我们的数据
行：[
{id:1，名称：“条目1”}，
{id:2，名称：“条目2”}
],
//我们关注哪些数据
焦点：1，
//添加一行新数据并将其设置为焦点
addRow:函数（）{
var id=this.nextId++；
this.rows.push（{id:id，name:（“条目”+id）}）；
这个.setFocusedId（id）；
},
//获取给定数据id的name属性
getName:函数（id）{
返回u.findWhere（this.rows，{id:id}）.name；
},
//更新当前关注数据的name属性
updateName:函数（名称）{
var id=this.focusedId；
_.findWhere（this.rows，{id:id}）.name=name；
this.listener.changed（）；
},
//设置聚焦数据
setFocusedId:函数（id）{
this.focusedId=id；
this.listener.changed（）；
},
};
//行组件
var Row=React.createClass({
渲染：函数（）{
如果（这个。道具。聚焦）{
返回值：{this.props.name}[编辑]；
}否则{
返回
值：{this.props.name}
[]
;
}
}
});
//主要观点
var View=React.createClass({
//我们的状态就是应用程序
getInitialState:函数（）{
返回{
app:app
};
},
//在渲染之前，开始侦听应用程序的更改
componentWillMount:函数（）{
this.state.app.listener=this；
},
//如果应用程序告诉我们它已更改，请更新
已更改：函数（）{
这个.forceUpdate（）；
},
//我们将用于输入字段的处理程序
text更改：函数（事件）{
this.state.app.updateName（event.target.value）；
},
//让我们来渲染
渲染：函数（）{
var app=this.state.app；
//构建行组件的数组
var rows=u2;.map（app.rows，函数（row）{
变量焦点=函数（）{
app.setFocusedId（row.id）；
};
//实际行组件
//为行指定唯一的id
//给它一个名字，焦点处理函数，
//并告诉它是否有当前焦点
return

；
});
//主应用程序
/** @jsx React.DOM */

//React is for rendering our app UI. 
//Not for writing the app. 
//So the first step is building out your logic in whatever you prefer.
//That could be Backbone, some other framework, or plain JS as we do here.

//our app
var app = {

  //we'll tell this listener when we change
  listener: null,

  //a cheap way of creating IDs for our new data
  nextId: 3,

  //pre-populate our data
  rows: [
    {id: 1, name: "entry 1"},
    {id: 2, name: "entry 2"}
  ],

  //what data are we focused on
  focusedId: 1,

  //add a new row of data and set it to focused
  addRow: function () {
    var id = this.nextId++;
    this.rows.push({id: id, name: ("entry " + id)});
    this.setFocusedId(id);
  },

  //get the name property given the data id
  getName: function(id){
    return _.findWhere(this.rows, {id: id}).name;
  },

  //update the name property of the currently focused data
  updateName: function (name) {
    var id = this.focusedId;
    _.findWhere(this.rows, {id: id}).name = name;
    this.listener.changed();
  },

  //set the focused data
  setFocusedId: function (id) {
    this.focusedId = id;
    this.listener.changed();
  },
};

//a row component 
var Row = React.createClass({
  render: function () {
    if (this.props.focused) {
      return <span>Value: {this.props.name} [editing]</span>;
    } else {
      return <span>
      Value: {this.props.name} 
        [<a href='#' onClick={this.props.focus}>edit</a>]
      </span>;
    }
  }
});

//the main view
var View = React.createClass({

  //our state is the app
  getInitialState: function () {
    return {
      app: app
    };
  },

  //before we render, start listening to the app for changes
  componentWillMount: function () {
    this.state.app.listener = this;
  },

  //update if the app tells us it changed
  changed: function () {
    this.forceUpdate();
  },

  //a handler we'll use for input fields
  textChanged: function (event) {
    this.state.app.updateName(event.target.value);
  },

  //let's render
  render: function () {
    var app = this.state.app;

    //build an array of row components
    var rows = _.map(app.rows, function (row) {
      var focus = function () {
        app.setFocusedId(row.id);
      };
      //the actual row component
      //give the row a unique id
      //give it a name, the focus handler function,
      //and tell it if it has the current focus
      return <li key={row.id}>
        <Row 
          name={row.name}
          focused={row.id == app.focusedId}
          focus={focus}
        />
      </li>;
    });
    //the main app view
    return <div>
    EDIT:
      <input 
        type="text" 
        value={app.getName(app.focusedId)} 
        onChange={this.textChanged}
      />
      <ul>{rows}</ul>
      <a href="#" 
        onClick={function(){app.addRow()}}>
        add row
      </a>
    </div>;
  }
});

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