小编luk*_*uke的帖子

所以我刚刚开始使用React,并且无法在子组件中收集输入的输入值.基本上,我正在为我正在制作的大型表单创建不同的组件,然后在包含组件中,我想收集我正在调用数据的对象中的子项的所有输入值,然后将收集的输入发送到POST AJAX请求(您可以在我制作的最后一个组件中看到一个示例).当我在组件内部时,我可以很容易地提取值,但是从父组件中拉出它我还没想到.

提前致谢.现在就通过React解决这些问题,所以关于如何更好地构建这个问题的任何建议,我都是耳朵!

这是我的组件:

第一部分

var StepOne = React.createClass({
  getInitialState: function() {
    return {title: '', address: '', location: ''};
  },
  titleChange: function(e) {
    this.setState({title: e.target.value});
  },
  addressChange: function(e) {
   this.setState({address: e.target.value});
  },
  locationChange: function(e) {
    this.setState({location: e.target.value});
  },
  render: function() {
    return (
      <div className="stepOne">
        <ul>
          <li>
            <label>Title</label>
            <input type="text" value={this.state.title} onChange={this.titleChange} />
          </li>
          <li>
            <label>Address</label>
            <input type="text" value={this.state.address} onChange={this.addressChange} />
          </li>
          <li>
            <label>Location</label>
            <input id="location" type="text" value={this.state.location} onChange={this.locationChange} />
          </li>
        </ul>
      </div>
    );
  }, // render
}); // end …

我是 React 的新手，并且在删除记录后苦苦思索如何操作 DOM。我有一些反应组件，但我关注的一个是删除我设置的 rails api 中的记录。我在 Ajax onclick 调用中删除了记录，但不知道使用 React 删除特定行的最佳方法。

充满数据的表格

var ContactAll = React.createClass({
  getInitialState: function() {
    return {
      contacts: [] 
    }
  },
  componentDidMount: function() {
    $.ajax({
      dataType: "json",
      url: '/all-contacts',
      type: "GET",
      context: this,
      success: function(data, status, xhr) {
        this.setState({ contacts: data });
      }
    });
  },
  render: function(){
    if(this.state.contacts == 0) {
      return (
        <div>Loading</div>
      )
    } else {
      var contactComponents = this.state.contacts.map(function(contact, i) {
        var full_name = contact.first_name + ' ' + contact.last_name

        return  <tr …

我希望标记/图钉在用户在地图上拖动时滚动并位于地图的中心。我有一个简单的jsfiddle（http://jsfiddle.net/upsidown/5xd1Lbpc/6/），当用户停止拖动时，该图钉将下降到地图的中心，但是我希望该图钉随着拖动而移动。

Google Maps JS

var center = new google.maps.LatLng(-33.013803, -71.551498);

var map = new google.maps.Map(document.getElementById('mapBox'), {
    zoom: 18,
    center: center,
    mapTypeId: google.maps.MapTypeId.HYBRID
});

var myMarker = new google.maps.Marker({
    position: center,
    draggable: true,
    map: map
});

google.maps.event.addListener(myMarker, 'dragend', function () {
    map.setCenter(this.getPosition()); // Set map center to marker position
    updatePosition(this.getPosition().lat(), this.getPosition().lng()); // update position display
});

google.maps.event.addListener(map, 'dragend', function () {
    myMarker.setPosition(this.getCenter()); // set marker position to map center
    updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
});

function updatePosition(lat, lng) …

我正在通过一个 JSON 文件渲染一些基本文本，该文件通过 React to index.html 创建 3 个具有相同类和引导网格系统类的单独 div。我希望每个单独的 div 都有不同的背景颜色。我已经编写了一个小的 jQuery 代码段来执行此操作，但由于某种原因它不会呈现给单个 div 类。

我的反应组件（我通过另一个 React 类渲染它）

var StapleIndividual = React.createClass({
  render: function(){
      var articleNodes = this.props.data.map(function(title) {
        return(
          <div className="category col-md-4">
            <h2 article="title.article" key={title.id}>
              {title.article}
            </h2>
          </div>
        );
      });
    return (
      <div className="all-categories">
        {articleNodes}
      </div>
    );
  }
});

我在另一个文件中的小 jQuery 片段用于应用背景颜色。第一个 console.log 有效。在each声明中，它不是。

$(document).ready(function() {
  var randomColors =    ["green","yellow","red","blue","orange","pink","cyan"];
  console.log('this is working')

  $(".category").each(function() {
   var len = randomColors.length;
   var randomNum = Math.floor(Math.random()*len);
   $(this).css("background-color",randomColors[randomNum]);
   //Removes color …