Reactjs 在JSX/React中从Flux设计模式的输入文本字段中获取字符串

我正在制作一个网站，从一个API获取数据，并在一个视图中显示数据，该视图使用JSX和React以flux模式实现。我收到的数据是丹麦的天气报告数据，我希望用户只需在输入文本字段中键入他们想要的城市，只获取有关该城市的信息，视图就会相应地更新。但是，在我的实现中，我没有在定义JSX代码的地方呈现它，而是在声明JSX代码的地方之外呈现视图状态（它不在render（）块中）。它在我的index.js文档中

JSX部件如下所示：

const PersonDataBody = ({model, dispatcher}) => (
    <tbody> 
        {
            model.showData().map(report => <PersonRow key={report.quantity.toString()} {...{report, dispatcher}}/>) 
        }
    </tbody>
)

---

提前谢谢。在不同的线程中会有类似的问题，它们的呈现方法和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>
)

export default dispatcher=>model=>(
天气预报
dispatcher（）（{type:document.getElementById（'inputsection3'）.value}>设置间隔
ValueTypeUnitTimePlace
)

---

这将满足您的需要

非常感谢！它现在起作用了。@TuğbarsHeptaşkın awe nice，请不要忘记将此标记为答案。

 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))

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>
)