我正在制作一个网站，该网站从API提取数据并在视图中显示数据，该视图通过JSX和React以流量模式实现。我接收的数据是丹麦的天气预报数据，我希望用户只需在输入文本字段中键入他们想要的城市，仅获取有关该城市的信息，然后视图将相应地更新。但是，在我的实现中，我没有在定义JSX代码的位置渲染它，而是在声明JSX代码的位置之外渲染了视图状态（它不在render（）块内）。它在我的index.js文档中。
JSX部分看起来像这样：
const PersonDataBody = ({model, dispatcher}) => (
<tbody>
{
model.showData().map(report => <PersonRow key={report.quantity.toString()} {...{report, dispatcher}}/>)
}
</tbody>
)
我只是在这里开始使用获取的数据创建表，其余的并不是很重要。重要的是我将JSX代码导出到index.js：
export default dispatcher => model => (
<div id='base'>
<h1>Weather Report</h1>
<input type="text" id ="inputsection2"></input>
<div id='interval'>
<input type="text" id ="inputsection3" class="input1"></input><button onClick = {() => dispatcher()({type:'Copenhagen'})}>Set Interval</button>
</div>
<table class="styled-table" id='reports'>
<thead><tr class="active-row"><td>Value</td><td>Type</td><td>Unit</td><td>Time</td><td>Place</td></tr></thead>
<PersonDataBody {...{model, dispatcher}}/>
</table>
</div>
)
我希望能够获取ID为“ inputsection3”的输入文本字段中的数据，并希望将该字符串作为参数传递给调用调度程序的地方：<button onClick = {（）=> dispatcher（） （{type：'Copenhagen'}）}>。我想基本上将输入文本字段中存在的“类型”参数传递给调度程序。信息将被更新，视图将再次呈现。
index.js呈现视图的地方，我只共享与我的问题有关的部分：
let renderer = dom => ReactDOM.render(dom, document.getElementById('root'))
let theDispatcher
const theView = view(() => theDispatcher)
const theStore = store(theModel, theView, renderer)
theDispatcher = dispatcher(theStore)
renderer(theView(theModel))
提前致谢。在不同的线程中也有类似的问题，它们的渲染方法和JSX代码没有分离。
好的，因此要从输入标签中获取信息，您只需按ID获取元素并按如下方式获取其值：
export default dispatcher => model => (
<div id='base'>
<h1>Weather Report</h1>
<input type="text" id ="inputsection2"></input>
<div id='interval'>
<input type="text" id ="inputsection3" class="input1"></input><button onClick = {() => dispatcher()({ type: document.getElementById('inputsection3').value })}>Set Interval</button>
</div>
<table class="styled-table" id='reports'>
<thead><tr class="active-row"><td>Value</td><td>Type</td><td>Unit</td><td>Time</td><td>Place</td></tr></thead>
<PersonDataBody {...{model, dispatcher}}/>
</table>
</div>
)
这将满足您的需求
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句