ReactJS有没有办法更改Plotly-js图中事件触发器的标题文本

Question

当我创建绘图时，我给它一个布局参数，我知道我可以设置x轴标题，但我想根据事件触发器显示的绘图来更改x轴标题。

我在哪里创建绘图：(Plotting.js(

<Plot
data={[]}
revision={this.state.revision}
config = {{displayModeBar: true, modeBarButtonsToRemove: ["lasso2d", "select2d", "zoom2d", "resetScale2d"], displaylogo: false}}
layout= {{
xaxis: {
range: [State.values.xMin, State.values.xMax],
title: {
text: "The text I'm trying to change is here"
}
}
}}
/>

我想更新绘图的地方：(StatisticField.js(

export default function StatisticsDropDown() {
return (
<Select onChange={(event) => {
State.values.PlotInfo.Fields = event.target.value
//console.log(document.getElementById("updater").innerHTML )
let e = {target: {value: ""}}
document.getElementById("min").value = 0
document.getElementById("max").value = 0


if(State.values.PlotInfo.Fields === "1"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " mA"
}
else if(State.values.PlotInfo.Fields === "2"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " dB"
}
else if(State.values.PlotInfo.Fields === "3"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " dBm"
}
else if(State.values.PlotInfo.Fields === "4"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " ps"
}
else if(State.values.PlotInfo.Fields === "5"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " dBm"
}
else if(State.values.PlotInfo.Fields === "6"){
Plot.layout.title.text = State.values.PlotInfo.Fields + " dB"
}
else{
Plot.layout.title.text = "broken very sad"
}
window.testing.createPlot(e)
}}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option> 
</Select>
);
}

Answer 1

您需要使用状态管理器，以便组件在其值更改时再次呈现。

使用useState捕获所选值StatisticsDropDown。

const [type, setType] = useState();

对于StatisticsDropDown组件，当值更改时更新类型值：

<select onChange={(e)= setType(e.target.value)}>
<option value="mA">mA</option>
<option value="dB">dB</option>
</select>

然后，可以设置"绘图标题"动态读取类型值。

<Plot
data={[]}
revision={this.state.revision}
config = {{displayModeBar: true, modeBarButtonsToRemove: ["lasso2d", "select2d", "zoom2d", "resetScale2d"], displaylogo: false}}
layout= {{
xaxis: {
range: [State.values.xMin, State.values.xMax],
title: {
text: type
}
}
}}
/>