Material-UI - 无法在可拖动对话框内单击多行文本字段答案

【问题标题】：Material-UI - Unable to click in multiline TextField inside Draggable DialogMaterial-UI - 无法在可拖动对话框内单击多行文本字段
【发布时间】：2019-10-03 05:50:46
【问题描述】：

我有一个可拖动的对话框，其中包含几个文本字段供用户填写和提交。但是，当我在 TextField 上设置多行选项时，我不再能够在该字段中单击并键入。如果我进入它，我只能在该字段内输入。不是多行的 TextFields 按我想要的方式工作。如何制作，以便我可以单击并输入多行文本字段？？？

这里包含几个代码 sn-ps... 这是来自可拖动对话框：

function PaperComponent(props) {
    return (
        <Draggable cancel="input">
            <Paper {...props} />
        </Draggable>
    );
}

const GenericDialog = props => {
return (
    <Dialog
        disableBackdropClick
        disableEscapeKeyDown
        disableRestoreFocus
        fullWidth={true}
        maxWidth={props.maxWidth}
        open={props.open}
        onClose={props.onClose}
        PaperComponent={PaperComponent}
    >
        <DialogTitle>{props.dialogTitle}</DialogTitle>
        {props.children}
            <DialogActions>
                <Button onClick={props.onSubmit} color="primary">
                    Submit
                </Button>
                <Button onClick={props.onClose} color="secondary" autoFocus>
                    Cancel
                </Button>
            </DialogActions>
        )}
    </Dialog>

这是我无法单击/键入的文本字段的定义方式：

<TextField
    style={{ margin: 0, width: '350px' }}
    label="Task Description"
    helperText="(1024 character maximum)"
    inputProps={{ maxLength: 1024 }}
    multiline
    rows="4"
    onChange={this.handleChange('taskDescription')}
    value={this.state.task.taskDescription}
    variant="outlined"
/>

【问题讨论】：

A CodeSandbox 重现该问题会有所帮助。

标签： reactjs material-ui

【解决方案1】：

我的困惑是我认为 TextField 是一个输入。但是使用 multiline 道具，它是一个文本区域。为了解决这个问题，我将 Draggable 取消属性更改为：cancel="input, textarea"

【讨论】：

【解决方案2】：

<TextField
style={{ margin: 0, width: '350px' }}
label="Task Description"
helperText="(1024 character maximum)"
inputProps={{ maxLength: 1024 }}
multiline
rows="4"
autoFocus={true}
onChange={this.handleChange('taskDescription')}
value={this.state.task.taskDescription}
variant="outlined"/>

【讨论】：