React如何從子組件中獲取SelectList的值

我正在處理一個表單，其中一個輸入項將是一個選擇串列。我正在嘗試通過使用可重用組件來實作表單。層次結構是這樣的：

<SignupForm>
    <CountrySelectList>
        <SelectList>

我能夠獲取要呈現的選擇串列，但我不確定如何將所需props的內容傳遞給子組件以系結下拉串列中的選擇？以下是組件（為簡潔起見，洗掉了一些表單欄位）。

注冊表單

class SignupForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            country: ''
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    handleSubmit(event) {
        event.preventDefault();
        let formData = new FormData();
        formData.append("Country", this.state.country);;

        fetch("api/account/signup", {
            method: "POST",
            body: formData })
            .then(response => response.json())
            .then(data => console.log(data));
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <CountrySelectList name="country" value={this.state.country} onChange={this.handleChange} />
                <SubmitButton btnText="Submit"/>
            </form>
        );
    }
}

export default SignupForm;

國家選擇串列

class CountrySelectList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            data: []
        };
    }

    async componentDidMount() {
        try {
            const response = await fetch('api/location/countries');
            const json = await response.json();
            this.setState({
                data: json,
                isLoaded: true
            });
        } catch (error) {
            console.log(error);
        }
    }

    render() {
        const { error, isLoaded, data } = this.state;

        if (error) {
            return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
            return <LoadingSpinner/>;
        } else {
            return (
                <SelectListGroup>
                    <Label label="country" title="Country"/>
                    <SelectList data={data} value={this.props.value} onChange={this.props.onChange} />
                </SelectListGroup>
            );
        }
    }
}

export default CountrySelectList;

選擇串列

export default function SelectList({ data, value, onChange, addClass="" }) {
return (
    <select
        value={value}
        className={`form-select ${addClass}`}
        onChange={onChange}>
        {data.map((data, index) => (
            <option key={index} value={data.value}>
                {data.text}
            </option>
        ))}
    </select>
);

}

uj5u.com熱心網友回復：

這個答案很好地解釋了從表單及其組件中獲取資料。 在 ReactJS 中獲取表單資料state通過將選擇另存為并使用form-> ，您可以完成兩次相同的作業submit。

如果你給你select一個name屬性，那么在handleSubmit函式中，事件引數將包含一個命名元素，你可以從中獲取值。

<select name='country' ...

然后函式可以使用

const handleSubmit = (event) => {
    console.log(event.target.country.value);
}

表單的 onSubmit 事件包含所有資訊，您只需命名元素。

標籤：反应

上一篇：ReactJS：子組件的狀態更改更新父組件

下一篇：如何使用HookuseEffect從服務器獲取異步請求？