使用 MobX 将输入绑定到 React Dumb 组件内的变量

Question

在学习使用 MobX 时，我想从 <input/> 更新 string。我知道在智能组件中我可以只使用 onChange={this.variable.bind(this)}，但我不明白在以下情况下我该怎么做：

const dumbComponent = observer(({ prop }) => {

  // prop is an object
  // destruct1 is a string, destruct2 is an array
  const { destruct1, destruct2 } = prop;
  const list = destruct2.map((item, key) => (<li key={key} >{item}</li>));

  return (
    <div>
      <h1>title</h1>
      <h2>{destruct1}</h2>
      // Relevent part start
      <input classname="destruct" value={destruct1.bind(this)} />
      // Relevent part end
      <ul>{list}</ul>
    </div>
  );
});

export default TodoList;

我可以绑定输入的值以某种方式破坏吗？显然，这段代码不起作用。但是我不知道怎么办。

Answer 1

您可以创建一个内联箭头函数并像这样更改 prop.destruct1：

const dumbComponent = observer(({ prop }) => {
  const { destruct1, destruct2 } = prop;
  const list = destruct2.map((item, key) => <li key={key}>{item}</li>);

  return (
    <div>
      <h1>title</h1>
      <h2>{destruct1}</h2>
      <input
        classname="destruct"
        value={destruct1}
        onChange={e => prop.destruct1 = e.target.value}
      />
      <ul>{list}</ul>
    </div>
  );
});

使用 MobX 将输入绑定到 React Dumb 组件内的变量

binding input to variable inside a React Dumb Component with MobX

javascript

reactjs

mobx

mobx-react