Html 如何更改其他人的反应组件'；s onclick

我正在构建一个React应用程序，其中我呈现了一个家谱。为此，在每个family tree组件节点中，我添加了一个onclick，它打开一个模式（也称为弹出表单），允许用户编辑此人的信息。在该模式/弹出窗口中，我在底部有一个提交按钮。我希望这样，当单击submit按钮时，表单中的输入字段（例如：name、parents等）将在树中的相应节点上获取和更新。我在代码中尝试了这一点：

submitbtn.onclick = () => {
    alert("couple submit clicked!");
    info.husband = document.getElementById("hname_inp").value;
    info.wife = document.getElementById("wname_inp").value;
    modal.style.display = 'none';
    alert(info.husband + ' ' + info.wife)
  };
  return (
    <li>
      <div onClick={handleClick}>
        <span className="male">{info.husband}</span>
        <span className="spacer"></span>
        <span className="female">{info.wife}</span>
      </div>
      <Children />
    </li>
  );

submitbtn.onclick=（）=>{
警报（“夫妇提交已点击！”）；
info.hurst=document.getElementById（“hname_inp”）.value；
info.fixer=document.getElementById（“wname\u inp”）.value；
modal.style.display='none'；
警报（信息丈夫+信息妻子）
};
返回(

{info.hurst}
{info.layer}

);

默认情况下，组件显示通过道具传递的信息。单击submit按钮时，我希望输入字段中的数据替换组件中的数据。onclick和数据显示良好，但组件未更新。我是新来的，所以这可能只是一个愚蠢的错误，请跟我坦白。 最后，这是一个小主题，但当我单击submit按钮时，屏幕会闪烁一秒钟，显示一个没有格式的html页面，然后它会恢复正常。原因可能是什么

编辑（新代码）：

从“React”导入React；
导出默认类扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
丈夫：这个。道具。丈夫，
妻子：这个，道具，妻子，
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
const newState=this.state
const modal=document.getElementById（'coupleModal'）；
modal.style.display='block'；
const submitbtn=document.getElementById（'couplesubmitbtn'）；
submitbtn.onClick=（事件）=>{
event.preventDefault（）
modal.style.display='none'
newState.hurst=document.getElementById（'hname'）.value；
newState.fixer=document.getElementById（'wname'）.value；
}
this.setState（newState）；
}
render（）{
const children=this.props.children；
返回(

{这个州，丈夫}
{这个州。妻子}
{children！=null&&children.length！==0？
{children}
：“”

);
}
}

如之前评论中所述，如果您能提供一把小提琴等，那就太好了

你提到你是新来的，所以即使冒着听起来很愚蠢的风险，我可以问一下，你在这里使用的是一些sorf的状态处理吗？如果不是的话，这可能是一个值得研究的问题。如果您已经熟悉React state，那么这个答案毫无意义，应该忽略

在reactjs.org上有很多关于状态和道具之间的区别的文档

setState（）计划对组件的状态对象进行更新。当状态更改时，组件将通过重新渲染来响应

因此，在这种情况下，有关家谱的信息将初始化为状态，然后弹出窗口将通过setState更新状态。然后，新输入将获得更新和UI组件重新加载

如果我是对的，州处理将帮助你前进，我还建议你去查React钩子。钩子是React 16.8中新增的，当您掌握了状态的概念时，使用钩子将是编写应用程序的一种简单而优雅的方式

======================第二部分====================

以下是您在评论和其他一些想法中提出的问题的答案：

我假设闪烁实际上是提交时页面刷新。因此，捕获用户事件并传递它并调用preventDefault（）是一种方法。我将在下面举一个例子

看着你的代码，我越来越确信你确实缺乏状态处理，这是这里的首要问题。你可以多读一点关于它的内容。同时，它将帮助您更好地理解React通常如何工作的逻辑

下面是另一个值得查看的链接：

最后是代码片段。请注意，您试图以

getElementById

作为目标的wifes输入元素应该是

document.getElementById（“hname”）

而不是

document.getElementById（“hname_inp”）

======================第三部分====================

很高兴看到您仔细研究了状态处理并进行了尝试。我会继续通过一些额外的阅读来积累知识。这里有一篇关于Reacts数据处理的好文章

因此，与其在不同的组件中单独使用状态处理，我建议您将其移动到App.js，因为它显然是其他组件的父组件。在这里，您还应该考虑数据结构。我假设这个项目不会被任何api或数据库连接（至少现在是这样），所以这里也会处理它

因此，例如，为App.js定义某种基线可以如下所示

this.state = {
  state = { family : [
      [{ name: 'kari', gender: male }]
      [
        { name: 'jasper', gender: male },
        { name: 'tove', gender: femmale }
      ],
    ]
  }
}

那么我建议你也把操控者移到这里。然后把它们写在这里，你甚至不需要为夫妻和单身人士单独写

我很遗憾听到你仍然看到闪烁。我对此的最佳猜测是，modal不知道event.preventDefault。为了清楚起见，我也会对其进行重构。通常，尝试通过内部的getElements修改内容不是一个好的做法。通常都是状态和道具。因此，我在这里添加了几行代码，作为如何继续的示例

import React from "react";
import SingleModal from "./Modals/SingleModal";

export default class Couple extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
    this.popUpHandler = this.popUpHandler.bind(this);
  }

  popUpHandler(event) {
    event.preventDefault()
    this.setState({visible: !this.state.visible})
  }

  render(props) {
    return (
      <>
        <SingleModal visible={this.state.visible} popUpHandler={this.popUpHandler }/>
        <li>
          <div onClick={this.popUpHandler}>
            <span className={this.props.gender}>{this.props.name}</span>
          </div>
        </li>
      </>
    );
  }
}

从“React”导入React；
从“/Modals/SingleModal”导入SingleModal；
出口d
this.state = {
  state = { family : [
      [{ name: 'kari', gender: male }]
      [
        { name: 'jasper', gender: male },
        { name: 'tove', gender: femmale }
      ],
    ]
  }
}

import React from "react";
import SingleModal from "./Modals/SingleModal";

export default class Couple extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
    this.popUpHandler = this.popUpHandler.bind(this);
  }

  popUpHandler(event) {
    event.preventDefault()
    this.setState({visible: !this.state.visible})
  }

  render(props) {
    return (
      <>
        <SingleModal visible={this.state.visible} popUpHandler={this.popUpHandler }/>
        <li>
          <div onClick={this.popUpHandler}>
            <span className={this.props.gender}>{this.props.name}</span>
          </div>
        </li>
      </>
    );
  }
}

<input
type="submit"
value="Submit"
className="submit"
id="singlesubmitbtn"
onClick={(e) => {
  e.preventDefault();
  props.popUpHandler(e)
}}
/>

const [Husband, setHusband] = useState("Varun")
const [Wife, setWife] = useState("Alia")
 const handleClick = (e) => {
 e.preventDefault()
setHusband(prompt("Please enter your Husband Name:"))
  };
 const handleWife = (e)=>{
     e.preventDefault()
     setWife(prompt("Please enter your Wife Name:"))
 }
return (
  <li>
    <div>
      <span className="male" onClick={handleClick}>{Husband}</span>
      <span className="spacer"></span>
      <span className="female" onClick={handleWife}>{Wife}</span>
    </div>
  </li>
);
};