Question

此Meteor代码使用React。当用户填写标识为T3 == Image<T4>的输入框时，单击按钮。输入框值通过方法发送到服务器，服务器更新集合myVal 然后，它需要从用户那里获取该输入，并将其作为查询用于vehicles中的collection.findOne。它无法从html输入元素传递用户输入myfile.jsx 怎么做到呢？感谢

myVal

// -------------------- myfile.jsx -------------------
const renderWhenData = ( cars ) => {
  if ( cars ) {
    return <span>{ cars.description }</span>;
  }
};

const Info = ( { cars } ) => (
  <p>{ renderWhenData( cars ) }</p>
);

  const composer = (props, onData) => {
  const subscription = Meteor.subscribe('vehicles');
  if (subscription.ready()) {

    let myVal = document.getElementById('myVal').value;
    console.log(myVal);  // <------------------ nothing is printed out
    const cars = Vehicles.findOne({name: myVal});
    onData(null, {cars});
  }
};

const Container = composeWithTracker(composer)(Info);
ReactDOM.render(<Container />, document.getElementById('react-info'));

// --------------------- events.js -----------------------
document.getElementById('startButton').addEventListener('click', () => {
  const myVal = document.getElementById('myVal').value;
  Meteor.call('startInfo', myVal);  // <---------- updates server collection
});

Answer 1

这个问题有点学术性。在React中有更好的方法来处理这个问题。但是，由于您使用的是Meteor，因此可以通过一些Tracker操作来完成。

首先定义跟踪器依赖关系：

export const textboxDep = new Tracker.Dependency;

每当文本框值发生变化时，都会触发更改后的事件。

textboxDep.changed();

在作曲家中，使用

textboxDep.depend();

如果编写好的作曲家，当跟踪器依赖关系无效时，整个功能容器组件将再次运行。你应该在那里看到文本框的价值。

现在，当文本框的值发生变化时，由于它没有被动，因此容器不会重新渲染。

在React中将html元素值传递给composeWithTracker

1 个答案: