ReactJS

Question

我正在尝试使用 ReactJS 创建多行文本输入字段。我创建了这个组件：

var TextInput = React.createClass({
  getInitialState: function(){
    return {currentValue: this.props.children}
  },

  handleChange: function(event){
  //handler
  },

  render: function(){
    return (
        <textarea name="body"
                  onChange={this.handleChange}
                  value={this.state.currentValue}/>
    )
  }
});

我是这样渲染的：

# jinja2 template
React.render(
  <TextInput>{{ post.body }}</TextInput>,                  
  document.getElementById('post-editing')
);

问题：如果 {{ post.body }} 类似于 #Title \n text，textarea 在一行中显示它。我在我的文本区域中看到 #Title text 没有换行符。使用 ReactJS 设置 <textarea> 值的正确方法是什么？

Answer 1

您正在通过 value 属性以正确的方式设置 <textarea> 的值，问题是您作为 this.props.children 的值获取的字符串实际上是不是你想的那样。

在 <TextInput> 组件中输入值 "#Title \n text"，this.props.children 的值实际上是 "#Title \n text"（注意双反斜杠），您需要做像下面这样正确输出换行符：

    render: function(){
      var value = this.state.currentValue.replace('\n', '\n');
      return (
        <textarea name="body"
          onChange={this.handleChange}
          value={value}/>
      )
    }

Answer 2

如果您通过 value 属性指定您的输入值，那么它的文本区域将在每次重新渲染时使用该值进行渲染。相反，如果我理解正确的话，你应该使用 defaultValue。

    var TextInput = React.createClass({
        getInitialState: function(){
            return {currentValue: this.props.children}
        },
        handleChange: function(event){
          //handler
        },
        render: function(){
            return (
                <textarea name="body"
                    onChange={this.handleChange}
                    defaultValue={this.state.currentValue} />
            )
        }
    });

我还应该提到，在 React 中，在 getInitialState 中使用 props 是反模式，但这是另一个问题.. 和 explained in official documentation.

ReactJS - 多行文本区域

ReactJS - multiline textarea

html

javascript

jinja2