antd中form表单使用textarea会报错,该如何解决?

先上代码

import React from 'react';
import { Form, Input, Button, DatePicker, Select } from 'antd';
const FormItem = Form.Item;
const { TextArea } = Input;

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

  handleSubmit(){
    console.log('handleSubmit');
    }
    
  render() {
        const { getFieldDecorator } = this.props.form;
        

    return (
            <Form onSubmit={this.handleSubmit}>
                <FormItem label="消息内容">
                    {getFieldDecorator('INFO_CONTENT')(<TextArea />)}
                </FormItem>                
            </Form>
    )
  }
}

export default Form.create()(InfoAdd);

就会报错

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `InfoAdd`.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `InfoAdd`.

将form中的TextArea改为Input替代是可以得,说明代码没错误,
网上搜索错误信息,说是引入不正确,但是官网里对TextArea引入就是

import { Input } from 'antd';
const { TextArea } = Input;

ReactDOM.render(
  <div>
    <TextArea placeholder="Autosize height based on content lines" autosize />
    <div style={{ margin: '24px 0' }} />
    <TextArea placeholder="Autosize height with minimum and maximum number of lines" autosize={{ minRows: 2, maxRows: 6 }} />
  </div>
, mountNode);

不过不是在form中,所以想问问各位 有没有什么好的解决方法? 或者是我哪里写错了?

或者在form中,要输入大量的文本,用哪个控件代替?

阅读 14.1k
2 个回答

antd的textarea可以使用input来代替,需要加上type=‘textarea’,这样之后,所有的事件与inputt的都一致了。可以看看官方文档,写的其实很详细。
代码如下:

              <Input
                type='textarea'
                placeholder='textarea内容'
                autosize={{ minRows: 12 }}
                onChange={this.textareaChange}
              />
新手上路,请多包涵

我用<TextArea></TextArea>也会报你这个错,用<Input.TextArea></Input.TextArea>就不报错了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题