javascript - Material-UI 和 React - 将 &lt;input&gt; 更改为 <TextField> 会阻止表单提交工作？

Question

我有一个带有输入和按钮的表单，用于将任务添加到我的 CRUD Todo 应用程序。我最初使用纯 HTML 来启动和运行该功能，然后引入 Material-UI 来让事情看起来更好一点。

但是，由于<TextField>，我用于向列表提交新任务的表单不再有效。取代 <input> ，我不明白为什么。

运行 TextField 时出现一些错误，主要是当它尝试向下传递其 props 时。 但是当我将 TextField 更改回输入并将其他所有内容保留在其 Material-UI 变体中时，它实际上可以工作。这让我认为 TextField 缺少一些功能。

如有任何帮助，我们将不胜感激。

工作代码(使用 Material 按钮输入)

render() {
        return(
            <form ref="inputForm" onSubmit={this.handleCreate.bind(this)}>
                <input type="text" ref="createInput" placholder="task..."/>
                <button>Create</button>
                {this.renderError()}
            </form>
        )
    }

损坏的代码(带有 Material 按钮的 TextField)

render() {
        return(
            <form ref="inputForm" onSubmit={this.handleCreate.bind(this)}>
                <TextField name="CreateNew" type="text" ref="createInput" placholder="task..."/>
                <FlatButton type="submit">Create</FlatButton>
                {this.renderError()}
            </form>
        )
    }

Answer 1

我发现问题的原因在于元素的定义及其调用的函数。

我需要 <FlatButton type="submit">...正如我之前所想到的，但我也试图获取表单本身的值，而不是 Textfield 引用。

我还发现在 TextField 中输入的文本需要通过 this.refs.createInput.input.value 访问.

请参阅下面的 HTML 附带的函数

render() {
    return(
        <form name="newForm" ref="inputForm" onSubmit={this.handleCreate.bind(this)}>
            <TextField name="CreateNew" type="text" ref="createInput" placholder="task..."/>
            <FlatButton type="submit">Create</FlatButton>
            {this.renderError()}
        </form>
    )
}

handleCreate(event) {
    console.log("clicked")
    event.preventDefault();

    const createInput = this.refs.createInput.input;
    const task = createInput.value;
    // Capitalise first letter of input (ie. newTask ==> NewTask)
    const Task = this.capitalise(task);
    // Validate task has been input and is not a clone
    const validateInput = this.validateInput(Task);

    if (validateInput) {
        console.log("if(validateInput")
        this.setState({ error: validateInput})
        return;
    }

    this.setState({ error: null });
    if(createInput) {
        this.props.createTask(Task);
        this.refs.inputForm.reset();
    }
}