が、私はこのフォームのクラスを持っているコンポーネント

Question

を反応させますテキストボックスからの入力に基づいてさまざまなパラメータを持つ新しいクラスを作成し、その値を表示します。どのようにしてレンダリングメソッドの内部からそのメソッドを呼び出すのですか？これは、やや私の問題を示し

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; 
    } 
} 

ここで反応させ、部品の代替的なアプローチとして、

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> 
    ); 
    } 
} 

---

です。ロジックをプレゼンテーションから分離するパターンを使用できます。関数を子として使用する例を次に示します。電卓は計算を処理し、プレゼンテーションは電卓を使用して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

最初の試みの問題は、あなたがそれについて知っているリアクトせずにコンポーネントの状態を変異されていることです。 setState()またはforceUpdate()を使用する必要があります。あなたの状態を管理するには、​​をまだ持っている1つの方法：

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> 
    ); 
    } 
}