Question

我很难理解在哪里可以使用父元素传递的道具。似乎道具只在render（）方法中可用。

下面的代码是正常工作但是我不能轻松序列化表单数据并执行“e.preventDefault（）”事情（可以吗？） ... 最好用const Form = props =＆gt;写。 {...}）

class Form extends Component {
  render() {
    const {
      handleSubmit
    } = this.props;

    return (
      <div>
        <form
          onSubmit={this.props.handleSubmit.bind(this)}
        >
          <TextInput />

          <button className="Button">Add</button>
        </form>
      </div>
    );
  }
}

但不起作用（onSubmit方法中没有道具）：

class Form extends Component {
  onSubmit(e) {
    e.preventDefault();
    const data = ... serialized form data;

    this.props.handleSubmit(data);
  }

  render() {
    return (
      <div>
        <form
          onSubmit={this.onSubmit}
        >
          <TextInput />

          <button className="Button">Add</button>
        </form>
      </div>
    );
  }
}

我是否误解了一些react.js方法？可能有一些.bind（这个）丢失了吗？

提前致谢。

Answer 1

是否可能缺少某些.bind（this）？

是的，您需要/可以使用.bind，或使用arrow functions，因为现在this未提及Form

class Form extends Component {
  constructor() {
    super();
    this.onSubmit = this.onSubmit.bind(this)
  }
  ...
}

或只使用arrow function

<form
  onSubmit={ (e) => this.onSubmit(e) }
>

从父组件传递的道具是否仅在渲染中可用？

1 个答案: