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

如果我很了解，您基本上想将数据从孩子发送给父母。您只需将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"));

Answer 2

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;

````

语义UI下拉菜单，尝试将状态从子级设置为父级

2 个答案: