React 如何从子组件获取选定值到父组件 TypeScript

Question

有一个问题我无法从 select 中获取 selected 值 a 保存 selected 值在他的状态下，如何保存值 select在父组件的状态下编辑。 chils 组件的 selected 值的状态存在于组件

的状态中

父组件

    interface AddUserDataState {
        UserName: string;
        Name: string;
        CompanyID: string;
        CustomerID: string;
        Email: string;
        VAdministrador: string;
        VCustomer: string;
        VClient: string;
        VMovil: string; 
    }

    export default class AddUsers extends React.Component<RouteComponentProps<{}>,AddUserDataState>{
        constructor(props: RouteComponentProps<{}>) {
            super(props);
            this.state = {
                UserName:"",
                Name: "",
                CompanyID: "",
                CustomerID: "",
                Email: "",
                VAdministrador: "",
                VCustomer: "",
                VClient: "",
                VMovil: "",
            }
            this.updateInputUserName = this.updateInputUserName.bind(this);
            this.updateInputName = this.updateInputName.bind(this);
            this.updateInputCompanyID = this.updateInputCompanyID.bind(this);
            //this.updateInputCustomerID = this.updateInputCustomerID.bind(this);
            this.updateInputEmail = this.updateInputEmail.bind(this);
            this.updateInputVAdministrador = this.updateInputVAdministrador.bind(this);
            this.updateInputVCustomer = this.updateInputVCustomer.bind(this);
            this.updateInputVClient = this.updateInputVClient.bind(this);
            this.updateInputVMovil = this.updateInputVMovil.bind(this);

            //this.onChangeCustomerID = this.onChangeCustomerID.bind(this);

        }
        updateInputUserName(UserName: string) {
            this.setState({ UserName: UserName });
        }
        updateInputName(Name: string) {
            this.setState({ Name: Name });
        }
        updateInputCompanyID(CompanyID: string) {
            this.setState({ CompanyID: CompanyID });
        }
        /*updateInputCustomerID(CustomerID: string) {
            this.setState({ CustomerID: CustomerID });
        }*/
        updateInputEmail(Email: string) {
            this.setState({ Email: Email });
        }
        updateInputVAdministrador(VAdministrador: string) {
            this.setState({ VAdministrador: VAdministrador });
        }
        updateInputVCustomer(VCustomer: string) {
            this.setState({ VCustomer: VCustomer });
        }
        updateInputVClient(VClient: string) {
            this.setState({ VClient: VClient });
        }
        updateInputVMovil(VMovil: string) {
            this.setState({ VMovil: VMovil });
        }
        componentDidUpdate() {
            console.log(this.state);
        } 

        public FuncCreateUser(username: string, name: string, email: string, companyid: string, customerid: string, vadministrador: string, vcustomer: string, vclient: string, vmovil:string) {
            const url = 'api/User/AddUser';
            axios(url, { params: { username: username, name: name, email: email, companyid: companyid, customerid: customerid, vadministrador: vadministrador, vcustomer: vcustomer, vclient: vclient, vmovil: vmovil } })
                .then(response => {
                    console.log(response.data);
                    alert(response.data);
                });
        }

        public render() {     
            return <div className="col-md-8 order-md-1">
                <h2 className="mb-3">Users</h2>
                <form className="needs-validation">                
                    <div className="row">                
                        <div className="col-md-6 mb-3">
                            <label>UserName</label>
                            <input type="text" className="form-control" id="firstName" placeholder="" value={this.state.UserName} onChange={e => this.updateInputUserName(e.target.value)} />
                        </div>
                        <div className="col-md-6 mb-3">
                            <label>Name</label>
                            <input type="text" className="form-control" id="lastName" placeholder="" value={this.state.Name} onChange={e => this.updateInputName(e.target.value)} />
                        </div>
                    </div>
                    <div className="mb-3">
                        <label>Email <span className="text-muted">(Optional)</span></label>
                        <input type="email" className="form-control" id="email" placeholder="you@example.com" value={this.state.Email} onChange={e => this.updateInputEmail(e.target.value)} />
                    </div>
                    <div className="mb-3">
                        <label>Company#</label>
                        <input type="text" className="form-control" id="address" placeholder="1234 Main St" value={this.state.CompanyID} onChange={e => this.updateInputCompanyID(e.target.value)} />
                    </div>
                    <div className="mb-3">
                        <label>Customer#<span className="text-muted">(Optional)</span></label>
                        <DropDownListCustomer  />
                    </div>
                    <div className="row">
                        <div className="col-md-3 mb-3">
                            <label>V Admin</label>
                            <input type="text" className="form-control" id="country" placeholder="" value={this.state.VAdministrador} onChange={e => this.updateInputVAdministrador(e.target.value)} />
                        </div>
                        <div className="col-md-3 mb-3">
                            <label>V Customer</label>
                            <input type="text" className="form-control" id="city" placeholder="" value={this.state.VCustomer} onChange={e => this.updateInputVCustomer(e.target.value)} />
                        </div>
                        <div className="col-md-3 mb-3">
                            <label>V Cliente</label>
                            <input type="text" className="form-control" id="zip" placeholder="" value={this.state.VClient} onChange={e => this.updateInputVClient(e.target.value)} />
                        </div>
                        <div className="col-md-3 mb-3">
                            <label>V Movil</label>
                            <input type="text" className="form-control" id="zip" placeholder="" value={this.state.VMovil} onChange={e => this.updateInputVMovil(e.target.value)} />
                        </div>
                    </div>
                    <hr className="mb-4" />
                    <button className="btn btn-primary btn-lg btn-block" type="button" onClick={() => { this.FuncCreateUser(this.state.UserName, this.state.Name, this.state.Email, this.state.CompanyID, this.state.CustomerID, this.state.VAdministrador, this.state.VCustomer, this.state.VClient, this.state.VMovil) }}>Create</button>               
                </form>
            </div>
        }
    }

子组件有一个问题我无法从 select 中获取值 selected a 在他的状态下保存 selected 值，如何在状态下保存值 selected父组件。 chils 组件的 selected 值的状态存在于组件

的状态中

    interface CustomerListModel {
        results: Customer[];
    }
    interface Customer {

enter code here

        customerId: number;
        name: string;
        addressId: number;
    }
    interface CustomerProps {
        //CustomerID: string,
        //onChangeCustomerID: () => {}
    }
    interface CustomerState {
        CustomerList: CustomerListModel | null;
        SelectedCustomer: string | "";
    }
    class DropDownListCustomer extends React.Component<CustomerProps, CustomerState>
    {
        constructor(props: CustomerProps) {
            super(props);
            this.state = {
                CustomerList: null,
                SelectedCustomer:""
            }
        }
        getCustomerList = () => {
            const url = "api/User/Get_All_Customer";
            fetch(url)
                .then(response => {               
                    return response.json();
                })
                .then(response => {
                    this.setState({ CustomerList: response });
                });
        }
        updateSelectedCustomer(selectedCustomer: string) {
            this.setState({ SelectedCustomer: selectedCustomer })
        }
        public render() {
            let { CustomerList } = this.state
            return (
                <select className="DropDownListCustomer form-control" value={this.state.SelectedCustomer} onChange={e => this.updateSelectedCustomer(e.target.value)}>
                    {
                        CustomerList && CustomerList.results.map(customer => {
                            return (
                                <option key={customer.customerId} value={customer.customerId}>{customer.name}</option>
                            )
                        })
                    }
                </select>
            )
        }
        componentDidMount() {
            this.getCustomerList();
        }
    }
    export default DropDownListCustomer

Answer 1

客户的状态必须在您的 parent 中。首先将更新客户功能添加到您的 parent:

updateSelectedCustomer(selectedCustomer: string) {
   this.setState({ SelectedCustomer: selectedCustomer }) 
}

然后使用 props 将此函数传递给您的 child，并在发生变化时调用它：

interface CustomerProps {
   ...
   updateSelectedCustomer: (selectedCustomer: string) => void
}

updateSelectedCustomer(selectedCustomer: string) { 
   this.props.updateSelectedCustomer(selectedCustomer)
}

React 如何从子组件获取选定值到父组件 TypeScript

React How to get selected value from child component to parent component TypeScript

core

typescript

reactjs