Question

鉴于

var data = {
      value: <input type="text" value="Reg" onChange={this.handleValueChange}/>
    };

var RawDataTable = React.createClass({
  generateTable() {
      <td className="myColumnStyle">
        {data.value}
      </td>
  },

handleValueChange(e){
  console.log('mischief managed');
},

我收到运行时错误

bundle.js：51060未捕获TypeError：无法读取属性＆＃39; handleValueChange＆＃39;未定义的

问题是value无法识别onChange={this.handleValueChange}

换句话说，这有效：

  <td className="performColumnStyle">
    <input type="text" value="Reg" onChange={this.handleValueChange}/>
  </td>

但我想要的是什么（以及出了什么错误）：

  <td className="performColumnStyle">
    {data.value}
  </td>

我认为模型试图在模型对象本身转换JSX而不是React.createClass对象。我怎么能这样做？

更新

我设想react-bootstrap＆＃39; s modal dialogue。在这种情况下，我可以这样做：

<Modal.Body>
            <h4>Text in a modal</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</Modal.Body>

在这里，我们提供任何内容，它成为模式的一部分。我想为专栏设置类似的内容。

我可以像这样设置我的代码，它会起作用：

<MyTable.column>
  <input type="text" value="Reg" onChange={this.handleValueChange}/>
<MyTable.column>

我在问这样做是否有可能做出反应？：

<MyTable.column>
  {data.value}//Maybe I have to use dangerouslySetInnerHTML to do this?
<MyTable.column>

Answer 1

如果你没有得到未定义，你必须将方法绑定到类或组件。见下面的例子

＆＃13;

class SearchBar extends Component{

  constructor(props){
    super(props);

    this.state = {term: ''};
    this.onInputChange = this.onInputChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onInputChange(event){
    console.log(event.target.value);
    this.setState({term: event.target.value });
  }

  onFormSubmit(event){
    event.preventDefault();
    //fetch weather data
    this.props.fetchWeather(this.state.term);
    this.setState({term: ''});

  }

  render() {
    return (
      <form onSubmit={this.onFormSubmit} className="input-group">
        <input
          placeholder="Get a five day forecast in you favrite cities"
          className="form-control"
          value={this.state.term}
          onChange={this.onInputChange}
         />
        <span className="input-group-btn">
          <button type="submit" className="btn btn-secondary">Search</button>
        </span>
      </form>
    );
  }
}

＆＃13;

class App extends component{

constructor(props){
super(props);
  //you have to bind the method
this.handleValueChange = this.handleValueChange.bind(this)
}

render(){

  //call you method

}

}

＆＃13;

Answer 2

问题是this中的this.handleValueChange只是this INSIDE React.createClass({...。

数据在此函数之外初始化，这意味着上下文不同，因此this只是全局对象，它没有handleValueChange方法。

您可以在RawDataTable的render方法中初始化数据吗？像这样：

var RawDataTable = React.createClass({
  methods () {..}

  render () {
    data = { 
      value: <input type="text" value="Reg" onChange={this.handleValueChange}/>
    };
    return ( <more JSX here />)
  }
}

如果你这样做，它应该找到handleValueChange函数。

编辑：如果您从父组件传递数据作为道具，可能会有一些数据要放入您正在创建的JSX中。所以，让我们说你的数据是一个对象数组：

var RawDataTable = React.createClass({
  methods () {..}

  render () {
    const myJSXFromData = this.props.data.map((myObj) => {
      return <input type="text" value="{myObj.someProp}" onChange={this.handleValueChange}/>
    })
    return (
      {myJSXFromData}
      <more JSX here />
    )
  }
}

如何在javascript中嵌入JSX并允许回调？

更新

2 个答案: