Question

我有一个这种形式的课程：

 export default class FixedMem {
    constructor(totalMem){
      this._totalMem = totalMem
        }

    get totalMem(){
     return this._totalMem
    }
    addMem(mem){
      this._totalMem += mem
    }
   }

我将它导入我的反应组件，如下所示：

    import Fixed from '../somewhere'

如果我想根据文本框中的输入创建具有不同参数的新类并显示其值。我如何从render方法中调用它的方法？这有点说明了我的问题

class fixedBlock extends Component {
     constructor(){
       super()
       this.state = {
         "textInput":"",
         "totalMem":0,
         "fixed":null
         }
      }

     handleInputChanged(e){
      this.setState({
       "textInput":e.target.value
       }) 
      }

     handleButtonPressed(){
        this.setState({"fixed":new Fixed(parseInt(this.state.textInput))})
       }

     incrementButtonPressed(){
         this.state.fixed.addMem(2) 
     }

 render(){
    return(
   <div>
     <input type="button" onClick={this.handleInputChanged} value=
     {this.state.textInput}>
     <button onClick={this.handleButtonPressed}>create</button>
     <button onClick={this.incrementButtonPressed}> increment </button>
       <p>{this.state.fixed.totalMem}</p>
      </div>
     )

   }

  }

这不起作用，我必须解决这个问题的另一种方法是使用闭包，所以在我的反应组件中：

class fixedBlock extends Component{
  constructor(){//stuff here}

 FixedMem () {
   var FixedObj = null
   return {
       initFixed: function (totalMem) {
        FixedObj = new Fixed(totalMem, divisions)
  },
  totalMem: function () {
    return FixedObj.totalMem
  },
  increment: function(){
    FixedObj.addMem(2)
    }


   render(){//stuff here}

    }

我如何在渲染方法中使用它？

Answer 1

您的代码示例存在一些问题。缺少结束标记并重新绑定缺少的方法。

以下是在React组件中动态使用类实例的示例。但是我不建议使用这种方法。这主要是作为概念的证明。

class MyValue {
  constructor(val) {
    this._val = parseInt(val, 10) || 0;
  }
  get total() {
    return this._val;
  }
  set total(val) {
    this.val = val;
  }
  add(val) {
    this._val += val;
  }
  subtract(val) {
    this._val -= val;
  }
}

这是React组件

class Block extends React.Component {
  constructor() {
    super();
    this.state = {
      textInput: "",
      myValue: new MyValue()
    };
  }

  handleInputChanged(e) {
    this.setState({
      textInput: e.target.value
    });
  }

  handleButtonPressed() {
    this.setState({ myValue: new MyValue(this.state.textInput) });
  }

  incrementButtonPressed() {
    this.state.myValue.add(2);
    this.forceUpdate(); /* React does not know the state has updated, force update */
  }

  render() {
    return (
      <div>
        <input type="number" step="1" onChange={this.handleInputChanged.bind(this)} />
        <button onClick={this.handleButtonPressed.bind(this)}>create</button>
        <button onClick={this.incrementButtonPressed.bind(this)}>increment</button>
        <p>{this.state.myValue.total}</p>
      </div>
    );
  }
}

作为替代方法。您可以使用将逻辑与表示分开的模式。这是一个使用函数作为子的示例。计算器处理计算，Presentation使用计算器并显示GUI。

class Calculator extends React.Component {
  constructor() {
    super();
    this.state = {value: 0};
  }
  add(value){
    this.setState(prevState => ({value: prevState.value + value}));    
  }
  subtract(value){
    this.setState(prevState => ({value: prevState.value - value}));
  }
  set(){
    this.setState(prevState => ({value: parseInt(prevState.input, 10) || 0}));
  }
  input(value){
    this.setState({input: value});
  }
  render() {    
    return this.props.children(
      {
        value: this.state.value, 
        add: this.add.bind(this),
        subtract: this.subtract.bind(this),
        set: this.set.bind(this),
        input: this.input.bind(this),
      });
  }
}

const Presentation = props => (
    <Calculator>
      { ({value,add,subtract,set,input}) => (
        <div>
          <button onClick={() => add(2)}>add 2</button>
          <button onClick={() => subtract(3)}>subtract 3</button>
          <input type="number" step="1" onChange={e => input(e.target.value)} />
          <button onClick={set}>set</button>
          <p>{value}</p>
        </div>)
      }
    </Calculator>);

Answer 2

第一次尝试的问题是你在改变组件的状态而不让React知道它。您需要使用setState()或forceUpdate()。在让React知道的情况下仍然可以FixedMem管理您的州的一种方法是：

class FixedBlock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      textInput: '',
      totalMem: 0
    };
    this.fixedMem = new FixedMem(0);
    this.sync = this.sync.bind(this);
  }

  sync() {
    const totalMem = this.fixedMem.totalMem;
    this.setState({ totalMem });
  }

  handleInputChanged(evt) {
    this.setState({ textInput: evt.target.value });
  }

  handleButtonPressed() {
    this.fixedMem = new FixedMem(parseInt(this.state.textInput));
    this.sync();
  }

  incrementButtonPressed() {
    this.fixedMem.addMem(2);
    this.sync();
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleInputChanged.bind(this)} />
        <button onClick={this.handleButtonPressed.bind(this)}>create</button>
        <button onClick={this.incrementButtonPressed.bind(this)}>increment</button>
        <p>{this.state.totalMem}</p>
      </div>
    );
  }
}

如何在react组件中使用动态创建的类

2 个答案: