javascript - Victory onClick 事件不更新填充颜色

Question

我是反应新手，并试图在反应应用程序中使用 Victory 来制作简单的散点图。我正在研究这些示例，但无法使散点图的交互部分起作用。

这是我的 App.js

import ReactDOM from 'react-dom';
import { VictoryScatter } from 'victory';
import {sampleData} from './data_holder'



class App extends React.Component {
  render() {
    return (
      <div>
  <h3>Click Me</h3>
  <VictoryScatter
    style={{ data: { fill: "#c43a31" } }}
    size={9}
    labels={() => null}
    events={[{
      target: "data",
      eventHandlers: {
        onClick: () => {

          return [
            {
              target: "data",
              mutation: (props) => {
                const fill = props.style && props.style.fill;
                return fill === "black" ? null : { style: { fill: "black" } };
              }
            }, {
              target: "labels",
              mutation: (props) => {
                return props.text === "clicked" ?
                  null : { text: "clicked" };
              }
            }
          ];
        }
      }
    }]}
    data={sampleData}
  />
</div>

    )
  }
}

ReactDOM.render(<App/>,  document.getElementById('root'));

export default App

保存在 .data_holder 中的示例数据在这里：

export const sampleData=[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 5 },
      { x: 4, y: 4 },
      { x: 5, y: 7 }
    ]

onClick 事件正在发生（当我在 onClick 中添加日志语句时，它会清楚地显示出来），但填充颜色没有更新。任何帮助深表感谢。

Answer 1

使用onPressIn代替onClick将起作用。

Answer 2

看起来问题是由在 react 中为组件启用严格模式引起的。我不确定为什么，但是一旦我从反应中删除严格模式，情节就能更新。一旦我知道交互的细节，我会在这里更新。