Q:

Why does this callback function not add bind.(this)?

As I know, we need to use .bind each time when you pass your custom function to an event handler like onChange or onSubmit
In the following Example ,we pass an event handler (talk function) as a prop.
When a user click a button,talk function will be called.
var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('./Button');

var Talker = React.createClass({
  talk: function () {
    for (var speech = '', i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  },

  render: function () {
    return <Button talk={this.talk}/>;
  }
});

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

Button.js
var React = require('react');

var Button = React.createClass({
  render: function () {
    return (
      <button onClick={this.props.talk}>
        Click me!
      </button>
    );
  }
});

module.exports = Button;

This example uses Button talk={this.talk} instead of Button {this.talk.bind.(this)}
,but why?

A:

.bind is used to ensure the function is called with the context of the class rather than the context of the caller.
It is required particularly when you access class properties within the function.
For example if your speech variable was a class variable rather than a local one.
talk: function () {
    for (this.speech = '', i = 0; i < 10000; i++) {
      this.speech += 'blah ';
    }
    alert(this.speech);
  },

In this case you would need bind.
Your talk function is not doing this.
It has its own local variables and so can be called using any this context.
talk={this.talk} will work here.
Also the syntax for bind function incorrect in the question. It needs to be this.talk.bind(this) not this.talk.bind.(this)

