标签: react-jsx

我知道以前有人问过这个问题，但我已经尝试了所有我能找到的解决方案，在浪费了几天之后，我真的要哭了。我究竟做错了什么？

尽管我越来越不顾一切地试图诱使输入字段表现得像最基本的文本输入字段，但输入字段仍然存在readonly并且onChange不会触发。

这是我的代码：

import React, { Component, PropTypes } from 'react';

export default class Contact extends Component {

    constructor(props) {
        super(props);
        this.state = { name: '' };
        }

    handleChange(e) {
        this.setState ({ name: e.target.value });
    }

    render() {
        return (
          <div>
              <form>    
                  <input
                    type = "text"
                    value = { this.state.name } 
                    onChange = { this.handleChange.bind(this) }
                  />
              </form>
          </div>
        );
    }

}

编辑：我刚刚意识到，只要我添加<Contact />到不调用componentDidMount(). 如果有人能够详细说明为什么会使输入字段变为只读，即调用是否componentDidMount()以某种方式干扰onChange或setState？

编辑 …

我们已经使用 React 和 jsx 一段时间了，对于条件我们一直在使用我非常喜欢的 jsx-control-statements：

<If condition={something === true}>
    <div>Something</div>
</If>

最近我们的项目已经转移到 TypeScript，这很好，但是 jsx-control-statements 不再有效。原因是条件表达式不是 React 组件，而是在编译阶段由 Babel 处理，这意味着 TypeScript 不会编译。

我有哪些选择？

我想制作一个 If 组件，但它需要我将结果包装在一个我不喜欢的新元素中。

我正在使用React.js动态创建一个包含文本框的html表.我有行可以通过按钮单击删除.我希望,当我点击第一行上的"删除"时,表格将重新呈现,并删除第1行.但是,当react重新绘制表时,看起来它总是从DOM中删除表的最后一行,而不是使用我state对象的实际值.也许我发现了一个bug？这是我的代码:

/** @jsx React.DOM */

var MyApp = React.createClass({
    getInitialState: function () {
      return {
        col_one: ['c1r1', 'c1r2', 'c1r3'],
        col_two: ['c2r1', 'c1r2', 'c1r3'],
        col_three: ['c3r1', 'c3r2', 'c3r3']
      }
    },
    handleCellChange: function (colName, index, e) {
      console.log('onChange:', colName, index, e.target.value);
    },
    handleRemove: function (i) {
      var that = this;
      console.log('removing row:',i);
      _.forEach(this.state, function (val, colName) {
        that.state[colName].splice(i,1); // BUG???
        //_.pullAt(that.state[key], i); // doesn't work either
      });
      console.log(this.state);
      this.setState(this.state);

    },
    render: function() {
      var that = this,
        rows = [], …

我正在尝试学习我的第一个javascript项目的反应,并作为一个开始创建一个非常简单的代码,添加在文本框中输入的两个数字.在键入数字时重新呈现结果.这对我起作用反应v0.11.

var App = React.createClass({

    mixins: [React.addons.LinkedStateMixin],

    getInitialState: function() {
        return {
            payment: 0,
            payment2: 0
        };
    },
    render: function() {
        var total = parseInt(this.state.payment, 10) +
                    parseInt(this.state.payment2, 10);
        return (
            <div>
                <Payment {...this.props} valueLink={this.linkState('payment')}/><span>+</span>
                <Payment {...this.props} valueLink={this.linkState('payment2')}/><span>=</span>
                { total }
            </div>
        );
    }

});


var Payment = React.createClass({

    render: function() {
        return this.transferPropsTo(
            <input type="text" />
        );
    }

});

React.render(
 <App />,
 document.getElementById('app')
);

但是,似乎在v0.13中删除了transferPropsTo()函数.我如何在最新版本中执行等效操作.

我试过这个链接:

http://codepen.io/anon/pen/zxLdgz

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

但它不适用于:

我在jsx文件中尝试了这段代码

<a href="#openModal">Open Modal</a>

<div id="openModal" className="modalDialog">
    <div>
        <a href="#close" title="Close" className="close">X</a>
        <h2>Modal Box</h2>
        <p>This is a sample modal box that can be created using the powers of CSS3.</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    </div>
</div>

还有这段代码:

ondialog() 
{
    <dialog id="window">
        <h3>Sample Dialog!</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>
        <button id="exit">Close …

与React演示和其他示例一样,如果添加或删除了一条记录,我会看到人们重置状态数据.这导致整个列表被重新呈现,而不是简单地附加最新记录,或从当前DOM树中删除所选择的记录.

它有什么用？或者我该如何避免这种情况.

更新 情况:Facebook Feed,您继续滚动Feed,达到约5000个Feed状态和许多其他类型的卡.不仅如此,每个状态Feed都有自己的"评论列表".

每秒钟,5-10张状态卡预先挂在墙上,或者在延迟加载的情况下附加.即.每秒,你重新渲染n + n*0.5,其中n可以超过5000张卡.

另外,请考虑"重新绘制",渲染循环的成本.

如何以相同的方式有条件地在React组件上设置tabIndex属性,比如设置'disabled'属性？

我需要能够一起设置值和/或删除属性.

首先尝试使整个属性键和值变量:

<div { tabIndex } ></div>

但是编译器抱怨道.

第二个想法是:

const div;
if( condition ){
   div = <div tabIndex="1"></div>
}else{
   div = <div></div>
}

但是,这是不可取的,因为我的实际组件有很多属性,我最终会有大量的重复代码.

我唯一的另一个想法是使用ref,然后使用jQuery来设置tabindex属性,但我宁愿不必那样做.

有任何想法吗？

我习惯写这样的渲染可选组件:

var Foo = React.createClass({
  render: function() {
    var length = 0;
    return <div>Foo {length && <Bar />}</div>;
  }
}); 

这个简写在JSX指南if中的if/else中被提到为立即调用的函数表达式.但是,自从我最新更新的React以来,它开始渲染0而不是null.

这是一个jsfiddle

为什么会这样？

目前，在我的ReactJS项目中，我像这样保存cookie cookie.save('token', received_token, { path: '/'} );并从本地存储中检索它，如下所示：cookie.load('token');。

所以我想知道，是否有一种方法来设置.save()令牌接收到且过期后自动将其从本地存储中删除的过期时间？

谢谢您，我们将接受投票的答案。

const { module } = this.props;

return(
    <div className="Card">
        <Link to=`/${module}/detail`></Link>
    </div>
 )

上面的语法有什么问题？我有错误JSX value should be either an expression or a quoted JSX text