Question

我通过尝试解决谜题来练习React。如果有人能帮我进一步，我会很感激。

基本上我有两个组件，一个输入和一个表。输入应该是一个放在表格左下角单元格中的数字，它以数字N开头，然后从LTR增加X，然后再增加。我稍后想让用户增加RTL，但我现在只关注获取表和输入交互。

对于输入元素我有这个： https://codepen.io/anon/pen/jZYKQJ

＆＃13;

class NForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {valueOfN: ''};

    this.handleChangeOfN = this.handleChangeOfN.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({valueOfN: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          N:
          <input type="text" value={this.state.valueOfN} onChange={this.handleChangeOfN} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

＆＃13;

<div id=table-component>Loading...</div>

＆＃13;

然后让表元素甚至得到N的值就是我被困住的地方。我尝试了几个不同的数据表，包括教程https://flaviocopes.com/react-spreadsheet/中的一个，并试图将其剥离到最基本的元素。如果我能将N值从NForm元素传递到我的表格，我想我会更进一步。

＆＃13;

import React, { PropTypes, Component } from 'react'

import {
  Table,
  TableRow,
  TableRowColumn,
  TableBody
} from 'material-ui/Table';

export default class MagicTableReact extends Component {
  constructor(props) {
    super(props);
    console.log(this.props);
    this.state = {
      data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}],
      height: '300px',
      width: '20px',
      valueOfN: '',
      valueOfX : '',
      valueOfM : '',
      valueOfW : '',
    };
  };

  render() {
    return (
      <div  className="col-sm-3">
        <div>
          <h1>Table</h1>
          <Table
            valueOfN={this.state.valueOfN}
            valueOfX={this.state.valueOfX}
          >
            <TableBody
            >
              {this.state.data.map((user, i) =>
                <TableRow key={i}>
                  <TableRowColumn>{i+1}</TableRowColumn>
                  <TableRowColumn>{i+2}</TableRowColumn>
                  <TableRowColumn>{i+2}</TableRowColumn>
                  <TableRowColumn>{this.valueOfN}</TableRowColumn>

                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
      </div>
    )
  }
}

MagicTableReact.propTypes = {

};

＆＃13;

有谁知道为什么我的桌子没有接收到valueOfN

React - 在组件之间传递值

0 个答案: