Question

我有一个表单，其中包含一个输入和一个按钮，用于将任务添加到我的CRUD Todo应用程序中。我最初使用普通的HTML来启动和运行功能，然后介绍Material-UI以使事情看起来更好。

但是，由于<TextField>替换了<input>，我在列表中提交新任务的表单不再有效，我无法弄清楚原因。

运行TextField时出现一些错误，主要是在尝试将其道具传递到线上时。但是当我将TextField更改回输入并将其他所有内容保留在其Material-UI变体中时，它确实有效。这让我觉得它是TextField中缺少的一些功能。

任何帮助都将不胜感激。

工作代码（使用素材按钮输入）

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

代码损坏（带有素材按钮的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引用。

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

请参阅下面的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();
    }
}

Material-UI＆amp; React - 将<input />更改为<textfield>会停止表单提交吗？

1 个答案: