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

在学习使用MobX时，我想从

更新

字符串。
我知道，在智能组件中，我可以只使用
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;

const dumbComponent=观察者（{prop}）=>{
//道具是一个物体
//析构函数1是字符串，析构函数2是数组
const{destruct1，destruct2}=prop；
const list=destruct2.map（（项，键）=>（
{item}
）；
返回(
标题
{destruct1}
//相关部分开始
//相关部分结束
{list}
);
});
将默认值导出到列表；

我可以将输入的值绑定到destruct吗？
显然，这段代码不起作用。但是我不知道该怎么办。
您可以创建一个内联箭头函数，然后像这样修改
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>
  );
});

const dumbComponent=观察者（{prop}）=>{
const{destruct1，destruct2}=prop；
const list=destruct2.map（（item，key）=>
{item}
）；
返回(
标题
{destruct1}
prop.destruct1=e.target.value}
/>
{list}
);
});