小编jus*_*Dan的帖子

我正在努力将一些React应用分解为较小的组件。在分离代码之前，一切都按计划进行。我现在正在尝试调用一个函数onChange，该函数先调用一个函数，然后再将其作为调用prop。我正在像这样绑定函数，this.updateInput = this.updateInput.bind(this);但是我仍然无法弄清缺少的内容。我在这里尝试了最近的文章（React：将功能传递给子组件），但错误仍然存​​在。任何帮助都很棒。

这是我正在使用的代码：

class Weather extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      city: '',
      details: []
    };

    this.updateInputValue = this.updateInputValue.bind(this);
  }

  updateInputValue(e) {
    this.setState({
      city: e.target.value
    });
    console.log('hit')
  }

  render() {
    return (
      <div className={style.container + ' ' + style.bodyText}>
        <WeatherForm
          updateInput={this.updateInputValue}
        />
      </div>
    );
  }
}


class WeatherForm extends React.Component {
  constructor(props) {
    super(props);
    this.updateInput = this.updateInput.bind(this); 
  }

  updateInput(e) {
    this.props.updateInputValue(e);
  }

  render() {
    return (
      <div className={style.weatherForm}> …

我有这样的对象:

var obj = [
    {
      name: 'ob_1',
      childFields: [],
    },
    {
      name: 'ob_2',
      childFields: [
        {
          name: 'ob_2_1',
          childFields: [
            {
              name: 'ob_3_1',
              childFields: [],
              test: 124
            },
          ],
        },
      ],
    },
  ]

function getObjectByNamePath(path, fieds) {
    const pathArr = path.split('.');
    const result = fieds.find(field => {
      if (pathArr.length > 1) {
        if (field.name === pathArr[0] && field.childFields.length) {
          const newPath = pathArr.slice(1, pathArr.length).join('.');
          return getObjectByNamePath(newPath, field.childFields);
        }
        return false;
      } else {
        if (field.name === pathArr[0]) {
            return …

我在 div 中制作了一个表格以使其可滚动；

<div style="overflow-y: scroll; height:100px; width:100px;">
  <table
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <td>b</td>
        <td>b</td>
      </tr>
      <tr>
        <td>t</td>
        <td>t</td>
      </tr>
      <tr>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr>
        <td>b</td>
        <td>b</td>
      </tr>
      <tr>
        <td>t</td>
        <td>t</td>
      </tr>
    </tbody>
  </table>
</div>

此表可从上到下滚动。如何使表格的溢出从底部开始并向上滚动？

各位下午好。我一直致力于构建一个小型联系人列表应用程序，我想使用猫鼬来存储数据和会话项目。我以前从未使用过 mongoose，所以我选择了一个快速的 PDF 来跟随。大多数 if 都是有意义的，我能够将一些东西拼凑在一起并运行身份验证以使用UserSchema. 效果很好。我现在有点迷失的是如何使用 mongoose 创建第二个名为ContactSchema. 我以为我会为每个模式创建 2 个不同的文件（user.js 和 contact.js），但是当我尝试这样做时，当我在 mongo 终端中运行时，我仍然看不到联系人集合show collections，而且我也不会抛出任何错误。当我在 robomongo 中检查时也是如此。

我的服务器文件像这样调用我的所有模型：

require('./server/models').connect(config.dbUri);
// config.dbUri -> "dbUri": "mongodb://localhost/react_app"

我的 user.js 文件：

const mongoose = require('mongoose');
const bcrypt = require('bcrypt');

// define the User model schema
const UserSchema = new mongoose.Schema({
  email: {
    type: String,
    index: { unique: true }
  },
  password: String,
  name: String
});

...bcrypt code here

module.exports = mongoose.model('User', UserSchema);

我的 contact.js 文件：

const …

我试图在这里和其他地方搜索一些答案,但我似乎找不到任何东西.我正在经历一个'完整堆栈反应'PDF,在一个例子中,我们使用构建产品列表.map().但是他们这样使用它:

const allNames = names.map((name) => (
   <Name key={name.name} name={name.name} />
));

我习惯使用它的方式如下:

const allNames = names.map((name) => {
  <Name key={name.name} name={name.name} />
});

使用它第二种方式页面上没有显示任何内容.为什么是这样？我倾向于认为它与对象数组存储状态的方式有关.您可以在下面看到完整的代码.多谢你们.

class Name extends React.Component {
  render() {
    return (
      <li>{this.props.name}</li>
    );
  }
}

class NameList extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      names: [
        {
          name: 'dan' 
        },
        {
          name: 'fred' 
        }
      ]
    }
  }
  
  render() {
    const { names } = this.state;
    const allNames = names.map((name) => (
      <Name key={name.name} …

我想要一个垂直的拖动条来调整两个 div 的大小。我已经创建了一个相同的示例，但我遇到了一个问题。
实际：当我调整上部 div 的大小并向下移动滑块时，父 div 的面积会增加，因此会出现滚动条。
预期：调整大小时，如果滑块向下移动，它应该只显示上层 div 中包含的数据，当滑块向上移动时，它应该显示下层 div 的内容，并且不应该增加父 div 的总长度。

var handler = document.querySelector('.handler');
var wrapper = handler.closest('.wrapper');
var boxA = wrapper.querySelector('.box1');
var boxB = wrapper.querySelector('.box2');
var isHandlerDragging = false;

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target === handler) {
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false
  if (!isHandlerDragging) {
    return false;
  }

  // Get …

使整个 div 可点击

我检查了几个链接。我理解它，但它不适用于我的。

这是我的代码片段：

$('.Quiz').click(function(){
  window.location=$(this).find('a').attr('href');
  return false;
})

.Portfolio {
    background-color: #ffffff;
    width: 920px;
    margin: 0 auto;
    position: relative;

    margin-top: 120px;
    margin-bottom: 50px;

    border-style: solid;
    border-color: #dddddd;

    border-width: 2px;

    padding-left: 20px;
    padding-right: 20px;

    overflow: auto;
}

.port {
    color: #4aaaa5;
    border-style: solid;
    border-color: #cccccc;

    border-width: 2px;
    border-left-style: hidden;
    border-right-style: hidden;
    border-top-style: hidden;
}

.container_img  img{
    float:left;
    margin: 0 auto;
    padding: 20px;
    width: 230px;
    height: 230px; 
    position: relative;

}

.container h1 {
    float:left;
    position:relative;
    padding: 20px;
}

.Books{
    clear:left; …