Могу ли я вызвать опору из дочернего компонента с состоянием? - PullRequest
Новая
       70

Могу ли я вызвать опору из дочернего компонента с состоянием?

0 голосов
/ 23 апреля 2020

У меня есть компонент AddShoppingItem с состоянием, который просто отображает два текста input s и button в качестве компонентов управляемой формы: 

class AddShoppingItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            price: "",
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        const target = event.target;
        const targetName = target.name;
        const value = target.value;

        this.setState({
            [targetName]: value
        });
    }

    handleAddButtonClicked(e) {
        e.preventDefault();
        this.props.onAddItem(this.state);
    }

    render() {
        return (
            <form>
                <input
                    type="text"
                    name="name"
                    placeholder="Name"
                    value={this.state.name}
                    onChange={this.handleInputChange}
                />
                <input
                    type="number"
                    name="price"
                    placeholder="Price"
                    value={this.state.price}
                    onChange={this.handleInputChange}
                />
                <button onClick={e => this.handleAddButtonClicked(e)}>Add to List</button>
            </form >
        );
    }
}

Когда кнопка нажата, функция передается в onAddItem реквизит вызывается с текущим значением state. Затем родительский элемент выполняет запрос POST для добавления нового ShoppingItem и обновления своего собственного состояния. Родительскому компоненту не нужно знать о состоянии полей input, только когда нажата кнопка.

Основная строка, которая касается меня, - this.props.onAddItem(this.state);. Интересно, может ли это вызвать проблемы, поскольку state может асинхронно обновляться в React.

Разрешен ли этот шаблон в React? Или я должен поднять состояние до родительского компонента?

Меня беспокоит то, что если я подниму это состояние, разве этот компонент не будет тесно связан со своим родителем? Даже было бы невозможно ввести поля формы без реализации родителя, поэтому этот компонент сам по себе был бы бесполезен, или нет?

...