React论坛应用：textarea按回车提交问题及Markdown换行需求处理

看起来你遇到的核心问题是错误阻止了textarea的默认换行行为，导致无法输入Markdown需要的换行符（\n）。咱们一步步来修复：

问题根源分析 #

你的onEnterPress函数在textarea的onKeyDown事件中，按下回车键时直接调用了e.preventDefault()——这会阻止textarea插入换行符的默认行为，自然就没法输入Markdown需要的换行了。

修复方案 #

1. 移除不必要的回车阻止逻辑

直接删掉textarea上的onKeyDown={this.onEnterPress}，或者修改这个函数，不要阻止textarea的默认换行：

// 这个函数完全可以移除，因为textarea的回车默认不会触发表单提交，反而会正常插入换行
onEnterPress = e => {
  // 删掉 e.preventDefault(); 或者直接删除整个函数
};

这样按下回车键时，textarea会正常插入换行符\n，这正是Markdown解析需要的格式。

2. 确保Markdown渲染时正确解析换行

当你在后续渲染帖子内容时，需要用Markdown解析库（比如marked）来处理换行。举个简单的渲染示例：

// 假设在帖子详情组件中渲染内容
import marked from 'marked';

// 渲染时转换Markdown格式
<div dangerouslySetInnerHTML={{ __html: marked(this.props.post.Body) }} />

这样Markdown里的换行就会被正确解析成<br>或者段落分隔。

3. 可选：避免input框回车触发表单提交

如果你担心在标题/作者输入框按下回车键会意外提交表单，可以在表单上添加全局的按键处理：

// 在CreatePost组件中新增方法
handleFormKeyDown = e => {
  // 仅在input元素中按下回车时，阻止表单默认提交行为
  if (e.target.tagName === 'INPUT' && e.keyCode === 13) {
    e.preventDefault();
  }
};

// 然后在form标签上绑定该方法
<form onSubmit={this.createPost} onKeyDown={this.handleFormKeyDown}>

修改后的完整组件代码示例 #

export default class CreatePost extends Component {
  state = {
    redirect: false,
    Title: '',
    Author: '',
    Body: '',
  };

  updateState = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  createPost = e => {
    e.preventDefault();
    if (this.state.Body !== '') {
      this.props.createPost(this.state);
    }
    this.setState({
      Title: '',
      Author: '',
      Body: '',
      redirect: true
    });
  };

  // 可选：处理input框的回车，避免意外提交
  handleFormKeyDown = e => {
    if (e.target.tagName === 'INPUT' && e.keyCode === 13) {
      e.preventDefault();
    }
  };

  render() {
    if (this.state.redirect) {
      return <Redirect push to='/' />;
    }
    return (
      <div className='createPost'>
        <h1>Create Your Post!</h1>
        <form onSubmit={this.createPost} onKeyDown={this.handleFormKeyDown}>
          <label className='input'>
            Title:{' '}
            <input
              type='text'
              name='Title'
              value={this.state.Title}
              onChange={this.updateState}
              required
            />
          </label>
          <label className='input'>
            Author:{' '}
            <input
              type='text'
              name='Author'
              value={this.state.Author}
              onChange={this.updateState}
              required
            />
          </label>
          <textarea
            name='Body'
            className='body'
            value={this.state.Body}
            onChange={this.updateState}
            rows={8} // 可选：设置默认行数提升输入体验
          ></textarea>
          <input type='submit' value='Submit' className='submitBTN' />
        </form>
        <Link className='home' to='/'>
          Go Home
        </Link>
      </div>
    );
  }
}

这样修改后，你就能在textarea里正常输入换行符，支持Markdown的换行需求，同时也解决了之前的错误。

内容的提问来源于stack exchange，提问作者Christoffer Hennie