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

Question

我正在制作一个网站，该网站从 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”的输入文本字段中的数据，并且我想将该字符串作为参数传递给调度程序： 调度程序()({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 代码没有解耦。

Answer 1

好的，要从您的输入标签中获取信息，您可以简单地通过 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>
)

这将满足您的需求