问题描述
我正在制作一个从 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>
)
这只是我开始用我获取的数据创建表的地方,其余的不是很重要。 重要的是我导出到 index.js 的 JSX 代码:
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”的输入文本字段中的数据,并且我想将该字符串作为参数传递给调度程序:
呈现视图的 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))
提前致谢。不同线程有类似的问题,他们的render方法和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>
)
这将满足您的需求