Reactjs 语义UI下拉列表，尝试设置从子级到父级的状态_Reactjs_Create React App_Semantic Ui_Yarnpkg_React Dom

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

reactjs

Reactjs 语义UI下拉列表，尝试设置从子级到父级的状态,reactjs,create-react-app,semantic-ui,yarnpkg,react-dom,Reactjs,Create React App,Semantic Ui,Yarnpkg,React Dom,我试图通过在名称字段和值字段中尝试三元运算符，在父组件中渲染下拉语义组件2次。这是我的父组件 import React, { Component } from "react"; import CountrySel from "./countrySelection"; class AppDetail extends Component { constructor(props) { super(props); this.state = {

我试图通过在名称字段和值字段中尝试三元运算符，在父组件中渲染下拉语义组件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}来自“React”；
从“/countrySelection”导入CountrySell；
类AppDetail扩展组件{
建造师（道具）{
超级（道具）；
此.state={
国家1:“，
国家2:“，
};
}
值更改=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value，
});
日志（event.target.name）；
日志（event.target.value）；
};
render（）{
返回(
{" "}
国籍1：



{" "}
国籍2：
);
}
}
导出默认AppDetail；

我的子组件是：-

import React，{Component}来自“React”；
从“语义ui反应”导入{Dropdown}；
const countryOptions=[
{键：“af”，值：“af”，旗：“af”，文本：“阿富汗”}，
{键：“ax”，值：“ax”，标志：“ax”，文本：“阿兰群岛”}，
{键：“al”，值：“al”，旗：“al”，文字：“阿尔巴尼亚”}，
{键：“dz”，值：“dz”，旗：“dz”，文字：“阿尔及利亚”}，
{键：“as”，值：“as”，旗：“as”，文本：“美属萨摩亚”}，
{键：“ad”，值：“ad”，旗：“ad”，文字：“安道尔”}，
{键：“ao”，值：“ao”，旗：“ao”，文字：“安哥拉”}，
{键：“ai”，值：“ai”，旗：“ai”，文字：“安圭拉”}，
{键：“ag”，值：“ag”，旗：“ag”，文字：“安提瓜”}，
{键：“ar”，值：“ar”，旗：“ar”，文本：“阿根廷”}，
{键：“am”，值：“am”，旗：“am”，文字：“亚美尼亚”}，
{键：“aw”，值：“aw”，标志：“aw”，文字：“阿鲁巴”}，
{键：“非盟”，值：“非盟”，旗：“非盟”，文字：“澳大利亚”}，
{键：“在”，值：“在”，旗：“在”，文本：“奥地利”}，
{键：“az”，值：“az”，旗：“az”，文字：“阿塞拜疆”}，
{键：“bs”，值：“bs”，标志：“bs”，文本：“巴哈马”}，
{键：“bh”，值：“bh”，旗：“bh”，文本：“巴林”}，
{键：“bd”，值：“bd”，标志：“bd”，文本：“孟加拉”}，
{键：“bb”，值：“bb”，旗：“bb”，文字：“巴巴多斯”}，
{键：“by”，值：“by”，旗：“by”，文本：“白俄罗斯”}，
{键：“be”，值：“be”，旗：“be”，文本：“比利时”}，
{键：“bz”，值：“bz”，标志：“bz”，文字：“伯利兹”}，
{键：“bj”，值：“bj”，旗：“bj”，文本：“贝宁”}，
{键：“英国”，值：“英国”，旗：“英国”，文本：“联合王国”}，
{键：“in”，值：“in”，旗：“in”，文本：“India”}，
];
类countrySelect扩展组件{
建造师（道具）{
超级（道具）；
此.state={
国家1:“，
国家2:“，
};
}
选择国家=（val）=>(
这里尝试了三元运算符和名称字段，但没有任何效果。。。
选项={countryOptions}
onChange={this.handleDropdownChange.bind（this）}
/>
);
handleDropdownChange=（事件）=>{
event.persist（）；
这是我的国家({
[event.target.name]：event.target.value，
});
日志（event.target.name）；
日志（event.target.value）；
};
render（）{
返回{this.selectCountry（this.props.countrySelection）}；
}
}
导出默认国家选择；

正在尝试实现以下功能：-

当我选择nationality1时，我的nationality1状态应更新为父项，对于Nationality2，则反之亦然

有人能帮我吗？？？。

如果我理解的很好，你基本上想把你孩子的数据发送给你的父母。您只需将

valueChange

方法传递给您的子组件，它将在需要时调用它

以下是代码：

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}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
常量应用=（）=>{
const[appState，setAppState]=React.useState（null）；
常量值更改=e=>{
e、 坚持（）；
setAppState（prevState=>（{…prevState[e.target.name]：e.target.value}））；
};
返回(
儿童1：


儿童2：




appState:{JSON.stringify（appState）}
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"));

);
};
const Child=（{valueChange，childName}）=>{
返回；
};
render（，document.getElementById（“根”））；

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

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;

````

import React，{Component}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
类应用程序扩展组件{
state=null；
价值变化（e）{
e、 坚持（）；
this.setState（prevState=>({
…国家，
[e.target.name]：e.target.value
}));
}
render（）{
返回(
子1:this.valueChange（e）}childName=“child1”/>


子2:this.valueChange（e）}childName=“chld2”/>




状态：{JSON.stringify（this.state）}
);
}
}
const Child=（{valueChange，childName}）=>{
返回(
没有一个
Nat 1
Nat 2
Nat 3
);
};
render（，document.getElementById（“根”））；

如果我理解得很清楚，你基本上是想把孩子的数据发送给父母。您只需将

valueChange

方法传递给您的子组件，它将在需要时调用它

以下是代码：

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}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
常量应用=（）=>{
const[appState，setAppState]=React.useState（null）；
常量值更改=e=>{
e、 坚持（）；
setAppState（prevState=>（{…prevState[e.target.name]：e.target.value}））；
};
返回(
儿童1：


儿童2：




appState:{JSON.stringify（appState）}
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"));

);
};
const Child=（{valueChange，childName}）=>{
返回；
};
render（，document.getElementById（“根”））；

[编辑]此处