Question

我想动态生成TextField，然后将其值存储在状态中的数组中。

我的进口商品：

import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

我在TextField下面创建了一个按钮。我想在单击按钮后动态添加TextField。

TextField required={true}
    onChange={e => this.state.book_authors.push(e.target.value)}
    className={this.props.classes.textField}
    label={"Author"}
    variant="outlined"
    type="text"/>

<Button
    variant="contained" color="primary"
    action={() => this.handleAddAuthorField()}
    className={this.props.classes.button}
>
    Add Author
</Button>

我的方法：

 handleAddAuthorField(): JSX.Element {
    return (
        <Row>
            <TextField
                required={true}
                onChange={e => this.state.book_authors.push(e.target.value)}
                className={this.props.classes.textField}
                label={"Author"}
                variant="outlined"
                type="text"
            />
        </Row>

    )

}

book_authors状态是将TextField输入存储为数组。

public state: IsBookState = {
    book_authors: [],
};

单击按钮后，TextField没有生成。

Answer 1

这里有些事情有些偏离，但让我们关注这个问题。我感觉好像丢失了一些代码，没有看到应在何处呈现文本字段。

您想要以下内容：

this.state = { authors: [] } // Set in constructor

render() {
    const { authors } = this.state;

    return (
        <div>
            {authors.map(author => (
                <TextField author={author} />
            )}
            <Button onClick={this.handleAddAuthorField}>Add author field</Button>
        </div>
    )
}

这段代码非常简短，但是我的意思是，您需要将组件渲染到某个地方-就像我说的那样，我不确定我是否完全理解您的要求，请说明确切的功能是什么。< / p>

React Typescript：如何为按钮元素使用onClick函数动态添加表单元素？

1 个答案: