Question

我有一个购物清单应用程序，分为两个组件，如下所示：

我将这两个组件实现为：ShoppingList和：ItemDetails 还有另一个组件：ListItem表示一个项目行（带有编辑和删除按钮）。 ShoppinList映射到ListItems数组。

我的应用程序组件获取一个初始项目数组并将其发送到ShoppingList。每次在特定项目行中的编辑图标上单击时，我在我的应用程序组件中设置selectedItem对象并呈现ItemDetails组件，将它传递给selectedItem，如下所示：

toggleDetailsPanel = (itemId) => (e) => {
    this.setState((prevState, props) => {
        return {
            selectedItem: (prevState.selectedItem && prevState.selectedItem.id === itemId) ? null : this.findItemById(itemId),
        };
    });
};

在App渲染功能中，我将其呈现为：

<div className={styles.details_outer_container}>
                    {this.state.selectedItem ? <ItemDetails handleSubmit={this.saveDetails} item={this.state.selectedItem}/> : null}
                </div>

每当在保存按钮上单击时，我在应用程序组件上运行一个函数来更新items数组中的项目（saveDetails）。

现在我希望每次单击不同项目行中的不同编辑图标时，ItemDetails组件都会使用新值进行渲染，但输入值不会更改，只会标题呈现。

我尝试了我找到的所有解决方案，涉及defaultValue，或者使用getValue（）函数设置值，或者在输入上设置动态键，但没有什么真正有用。

这是我的ItemDetails文件：

import React from 'react';
import PropTypes from 'prop-types';
import { Grid, Row, Col, input, Button } from 'react-bootstrap';
import styles from './styles.css';

export default class ProductDetails extends React.Component {

    static propTypes = {
        handleSubmit: PropTypes.func.isRequired,
        item: PropTypes.any.isRequired,
    };

    state = {
        id: this.props.item.id,
        name: this.props.item.name,
        quantity: this.props.item.quantity,
        price: this.props.item.price,
        description: this.props.item.description,
    };

    // Set appropriate property in state by input name
    handleInputChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };

    // Submit changed item to parent component
    handleDetailsSubmit = (e) => {
        this.props.handleSubmit(this.state);
        e.preventDefault();
    };

    render() {
        const item = this.props.item;
        const itemName = item.name.toUpperCase() || '';

        return (
            <div className={styles.details_container}>
                <div className="sub_header">
                    <span>{`${itemName} DETAILS`}</span>
                </div>
                <form className={styles.form_style}>
                    <p>
                        <label>{'Quantity'}</label>
                        <input type="text" ref="quantity" name="quantity" value={this.state.quantity}  onChange={this.handleInputChange} />
                    </p>
                    <p>
                        <label>{'Price'}</label>
                        <input type="text" ref="price" name="price" value={this.state.price} onChange={this.handleInputChange}/>
                    </p>
                    <p>
                        <label>{'Description'}</label>
                        <textarea rows={2} ref="description" name="description" value={this.state.description} onChange={this.handleInputChange}/>
                    </p>
                    <div className={styles.button_div}>
                        <Button onClick={this.handleDetailsSubmit} bsStyle="primary" bsSize="small">
                            {'Save'}
                        </Button>
                    </div>
                </form>
            </`enter code here`div>

        );
    }

}

我理解这是React处理表单的方式，但实际上并不知道如何解决它。我真的很感激任何帮助：）

Answer 1

ProductDetails组件仅从item获取其初始值。从那时起，它全部保持在状态。因此，您需要在item更改时重置状态。

尝试添加以下内容：

componentWillReceiveProps( newProps ) {
  if ( this.props.item !== newProps.item ) {
    this.setState( {
      id: newProps.item.id,
      name: newProps.item.name,
      quantity: newProps.item.quantity,
      price: newProps.item.price,
      description: newProps.item.description,
    } )
  }
}

当prop在父组件中更改时，子组件中的输入不会更新

1 个答案: