小编ep8*_*p84的帖子

我有一个应用程序，可以从 GraphQL 数据库中提取数据，然后将其映射到自定义表单组件（数量文本框）中。现在，组件本身保存着各自数量的状态，但我需要能够从父级访问这些值，以便我可以使用应用程序中其他地方的输入来更改数量。我已经查看了这是如何完成的，我认为这可能是我需要的，但我不知道如何应用它：[How to target DOM with React useRef in map][1]

我的应用程序由一个父元素和一个包含输入的顶部栏、一个模态组件以及从 GraphQL 查询填充的元素映射组成。

export default function Home() {
  const [batch, setBatch] = useState([]);
  const [target, setTarget] = useState("");
  const [batchCount, setBatchCount] = useState(0);
  const [cartModalStatus, setCartModalStatus] = useState(false);

  const elementValues = useRef([]);
  const fetcher = query => request("https://data.objkt.com/v2/graphql", query);
  const { data, error } = useSWR(
  `{
    listing(where: {token: {creators: {creator_address: {_eq: ` + target + `}}, supply: {_gt: "0"}}, status: {_eq: "active"}}, order_by: {token: {timestamp: asc}, price: asc}) …

我正在尝试更流畅地了解 React 如何传递信息，并且出现了这个测试用例：

我有一个由 Canvas 对象和无限数量的孩子组成的组件。我想让孩子们访问这个组件的画布上下文。

我想知道我是否可以给组件一个带有画布上下文的 React Context 并用它包装孩子，然后让各个孩子选择成为消费者。然而，我不习惯 React 或其生命周期，不知道如何正确地做到这一点。我是不是彻底没了？这甚至可能吗？

这是有问题的组件：

const CanvasContext = React.createContext('default');
class Screen extends React.Component
{    

  render(){

    return (<div>
              <canvas id="myCanvas" ref={(c) => this.context = c.getContext('2d')} width="200" height="100" style={{border: '1px solid black'}}></canvas> 
              <CanvasContext.Provider value = {this.context}>{this.props.children}
              </CanvasContext.Provider>
          </div>);

  }
}

现在，它包含一个孩子：

class Test extends React.Component{

  render(){
    return <CanvasContext.Consumer>{ctx => {
              ctx.moveTo(0, 0);
              ctx.lineTo(200, 100);
              ctx.stroke();}}
          </CanvasContext.Consumer>;   
  }
}
ReactDOM.render(<Screen><Test/></Screen>, document.getElementsByClassName('container-fluid')[0]);

对此的帮助将不胜感激。

编辑：这是一个 Codepen：https ://codepen.io/ejpg/pen/XqvGdp

我开始利用业余时间为一个潜在的 NES 游戏项目学习 6502 汇编，但在设置控制器输入的读取时遇到了一些问题。我的背景是 C 语言，所以我熟悉内存及其工作原理，但汇编中的流程控制仍然让我无法理解。

因为我是新手，所以我认为我应该从简单开始并使用https://www.vbforums.com/showthread.php?858965-NES-6502-Programming-Tutorial-Part-5中描述的逐个按钮方法-控制器命令。这很好用，但确实重复且冗长。

有没有一种更优雅的方法来做到这一点，但又不完全超出我的能力？在没有帮助的情况下，我不知道如何集成其他来源的代码。

https://wiki.nesdev.com/w/index.php/Controller_reading_code看起来很有希望，但我并没有真正理解它来使用它。

感谢您的时间。

我试图在点击它时让轮子图像旋转(CSS变换+过渡).现在,我只能在使用'img:active'按住鼠标按钮时旋转它.我已经找到了答案,并且通常会感觉我应该使用onClick来打开和关闭动画的类,但我似乎没有做得对.我究竟做错了什么？这是我的代码,供参考:

class Wheel extends React.Component
{
  constructor(props){
    super(props);

    this.spin = this.spin.bind(this);
  }

  spin(e){
    e.classList.toggle('rotate');

  }
  render(){

    return (<div><img width="400" height="400" src="https://orig00.deviantart.net/0a38/f/2010/242/f/6/singapore_wheel_of_fortune_by_wheelgenius-d2xmb9v.jpg" onClick={this.spin}/>
</div>);

  }
}

ReactDOM.render(
  <Wheel/>,
  document.getElementsByClassName('container-fluid')[0]
);

CSS:

.rotate {
-webkit-transform: rotate(1095deg);
-webkit-transition: -webkit-transform 3s ease-out;
}

/* 
img:active {
    -webkit-transform: rotate(1095deg);
    -webkit-transition: -webkit-transform 3s ease-out;
}
*/

我已将所有内容放在CodePen上,网址为https://codepen.io/ejpg/pen/LmOVoR

先感谢您.