Semantic UI Dropdown ，尝试将状态从子级设置为父级

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 方法传递给您的子组件，它会在需要时调用它。

这是a repro on 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"));