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会将其显示在一行中。我在textarea中看到#Title text没有换行符。使用ReactJS设置<textarea>值的正确方法是什么？

Answer 1

您正在设置<textarea>正确方式的值，通过value属性，问题是您获得的字符串this.props.children的值实际上不是什么你认为是。

在"#Title \n text"组件中输入值为<TextInput>时，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属性指定输入值，那么textarea将在每次重新渲染时使用该值进行渲染。相反，如果我理解正确的话，你应该使用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中，在props中使用getInitialState是反模式，但这是另一个问题...... explained in official documentation。

ReactJS - 多行文本区域

2 个答案: