语义 UI 下拉列表 ，尝试设置从子级到父级的状态

Question

我正在尝试在名称和值字段中尝试三元运算符来呈现下拉语义组件，在父组件中呈现 2 次。这是我的父组件。

import React, { Component } from "react";
import CountrySel from "./countrySelection";
class AppDetail extends Component {
constructor(props) {
super(props);
this.state = {
nationality1: "",
nationality2: "",
};
}
valueChange = (event) => {
this.setState({
[event.target.name]: event.target.value,
});
console.log(event.target.name);
console.log(event.target.value);
};
render() {
return (
<div className="ApplicantDetail">
<label>
{" "}
Nationality 1:
<CountrySel
name="nationality1"
countrySelection={this.state.nationality1}
/>
</label>
<br></br>
<label >
{" "}
Nationality 2:
<CountrySel
name="nationality2"
countrySelection={this.state.nationality2}
/>
</label>
</Form>
</div>
);
}
}
export default AppDetail;

我的孩子组件是：-

import React, { Component } from "react";
import { Dropdown } from "semantic-ui-react";
const countryOptions = [
{ key: "af", value: "af", flag: "af", text: "Afghanistan" },
{ key: "ax", value: "ax", flag: "ax", text: "Aland Islands" },
{ key: "al", value: "al", flag: "al", text: "Albania" },
{ key: "dz", value: "dz", flag: "dz", text: "Algeria" },
{ key: "as", value: "as", flag: "as", text: "American Samoa" },
{ key: "ad", value: "ad", flag: "ad", text: "Andorra" },
{ key: "ao", value: "ao", flag: "ao", text: "Angola" },
{ key: "ai", value: "ai", flag: "ai", text: "Anguilla" },
{ key: "ag", value: "ag", flag: "ag", text: "Antigua" },
{ key: "ar", value: "ar", flag: "ar", text: "Argentina" },
{ key: "am", value: "am", flag: "am", text: "Armenia" },
{ key: "aw", value: "aw", flag: "aw", text: "Aruba" },
{ key: "au", value: "au", flag: "au", text: "Australia" },
{ key: "at", value: "at", flag: "at", text: "Austria" },
{ key: "az", value: "az", flag: "az", text: "Azerbaijan" },
{ key: "bs", value: "bs", flag: "bs", text: "Bahamas" },
{ key: "bh", value: "bh", flag: "bh", text: "Bahrain" },
{ key: "bd", value: "bd", flag: "bd", text: "Bangladesh" },
{ key: "bb", value: "bb", flag: "bb", text: "Barbados" },
{ key: "by", value: "by", flag: "by", text: "Belarus" },
{ key: "be", value: "be", flag: "be", text: "Belgium" },
{ key: "bz", value: "bz", flag: "bz", text: "Belize" },
{ key: "bj", value: "bj", flag: "bj", text: "Benin" },
{ key: "uk", value: "uk", flag: "uk", text: "United Kingdom" },
{ key: "in", value: "in", flag: "in", text: "India" },
];
class countrySelect extends Component {
constructor(props) {
super(props);
this.state = {
nationality1: " ",
nationality2: " ",
};
}
selectCountry = (val) => (
<Dropdown
placeholder="Select Country"
fluid
search
selection
value={this.props.nationality2}-->Here tried with ternary operator and in name field as well, but nothing works...
options={countryOptions}
onChange={this.handleDropdownChange.bind(this)}
/>
);
handleDropdownChange = (event) => {
event.persist();
this.setState({
[event.target.name]: event.target.value,
});
console.log(event.target.name);
console.log(event.target.value);
};
render() {
return <div>{this.selectCountry(this.props.countrySelection)}</div>;
}
}
export default countrySelect;

尝试实现以下功能：-

当我选择国籍1时，我的国籍1状态应更新为父国，国籍2应更新为父国，反之亦然。

谁能帮我这个？？...

Answer 1

import React, { Component } from "react";
import { Dropdown } from "semantic-ui-react";
const countryOptions = [
{ key: "af", value: "af", flag: "af", text: "Afghanistan" },
{ key: "ax", value: "ax", flag: "ax", text: "Aland Islands" },
{ key: "al", value: "al", flag: "al", text: "Albania" },
{ key: "dz", value: "dz", flag: "dz", text: "Algeria" },
{ key: "as", value: "as", flag: "as", text: "American Samoa" },
{ key: "ad", value: "ad", flag: "ad", text: "Andorra" },
{ key: "ao", value: "ao", flag: "ao", text: "Angola" },
{ key: "ai", value: "ai", flag: "ai", text: "Anguilla" },
{ key: "ag", value: "ag", flag: "ag", text: "Antigua" },
{ key: "ar", value: "ar", flag: "ar", text: "Argentina" },
{ key: "am", value: "am", flag: "am", text: "Armenia" },
{ key: "aw", value: "aw", flag: "aw", text: "Aruba" },
{ key: "au", value: "au", flag: "au", text: "Australia" },
{ key: "at", value: "at", flag: "at", text: "Austria" },
{ key: "az", value: "az", flag: "az", text: "Azerbaijan" },
{ key: "bs", value: "bs", flag: "bs", text: "Bahamas" },
{ key: "bh", value: "bh", flag: "bh", text: "Bahrain" },
{ key: "bd", value: "bd", flag: "bd", text: "Bangladesh" },
{ key: "bb", value: "bb", flag: "bb", text: "Barbados" },
{ key: "by", value: "by", flag: "by", text: "Belarus" },
{ key: "be", value: "be", flag: "be", text: "Belgium" },
{ key: "bz", value: "bz", flag: "bz", text: "Belize" },
{ key: "bj", value: "bj", flag: "bj", text: "Benin" },
{ key: "uk", value: "uk", flag: "uk", text: "United Kingdom" },
{ key: "in", value: "in", flag: "in", text: "India" },
];
class countrySelect extends Component {
constructor(props) {
super(props);
this.state = {
nationality1: " ",
nationality2: " ",
};
}
valueChange = (e) => {
e.persist();
if (e.target.name === "undefined") {
return;
} else {
this.setState({
[e.target.name]: e.target.value,
});
console.log(e.target.name);
console.log(e.target.value);
}
};
selectCountry = ({ valueChange, childName }) => {
return (
<Dropdown
placeholder="Select Country"
name={childName}
fluid
search
selection
options={countryOptions}
onChange={valueChange}
/>
);
};
render() {
return (
<div>
Child 1:{" "}
<this.selectCountry
valueChange={this.valueChange}
childName="nationality1"
/>
<br />
Child 2 :
<this.selectCountry
valueChange={this.valueChange}
childName="nationality2"
/>
<br />
</div>
);
}
}
export default countrySelect;
````

Answer 2

如果我理解得很好，您基本上希望将数据从您的孩子发送给您的父母。您只需将valueChange方法传递给您的子组件，它会在需要时调用它。

这是Stackblitz上的重现，这是代码：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
const App = () => {
const [appState, setAppState] = React.useState(null);
const valueChange = e => {
e.persist();
setAppState(prevState => ({...prevState, [e.target.name]: e.target.value}));
};
return (
<div>
Child 1: <Child valueChange={valueChange} childName="child1" /> 
<br />
Child 2 :<Child valueChange={valueChange} childName="chlid2" />
<br />
<br />
appState : <pre>{JSON.stringify(appState)}</pre>
</div>
);
};
const Child = ({ valueChange, childName }) => {
return <input type="text" name={childName} onChange={valueChange} />;
};
render(<App />, document.getElementById("root"));

---

[编辑]这是带有类组件的版本：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
class App extends Component {
state = null;
valueChange(e) {
e.persist();
this.setState(prevState => ({
...prevState,
[e.target.name]: e.target.value
}));
}
render() {
return (
<div>
Child 1: <Child valueChange={(e) => this.valueChange(e)} childName="child1" />
<br />
Child 2 :<Child valueChange={(e) => this.valueChange(e)} childName="chld2" />
<br />
<br />
state : <pre>{JSON.stringify(this.state)}</pre>
</div>
);
}
}
const Child = ({ valueChange, childName }) => {
return (
<select name={childName} onChange={valueChange}>
<option selected>None</option>
<option value="nat 1">Nat 1</option>
<option value="nat 2">Nat 2</option>
<option value="nat 3">Nat 3</option>
</select>
);
};
render(<App />, document.getElementById("root"));