React Typescript: Как динамически добавлять элементы формы с помощью функции onClick для элемента Button?

Question

Я хочу динамически генерировать TextFields и затем сохранять их значения в массиве в состоянии.

Мой импорт:

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

Я создал кнопку под TextField.Я хочу динамически добавлять TextFields после нажатия кнопки.

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>
    )
}

Этокод очень сокращен, но я хочу сказать, что вам нужно где-то визуализировать ваши компоненты - и, как я уже сказал, я не уверен, что полностью понимаю, о чем вы спрашиваете, пожалуйста, уточните, что именно является предполагаемой функциональностью.