return 另一个 class 如何在 React redux 中发挥作用

Question

...

class AddForm extends Component {
  constructor() {
    super();
  }
  
  getValue() {
    let refsValue = [{
     price: this.refs.price.value,
     remarks: this.refs.remarks.value
    }];

    return refsValue;
  }
  
  render() {
    return (
      <div>
        <input type="number" name="price" ref="price" />
        <input type="text" name="remarks" ref="remarks" />
      </div>
    );
  }
}

class BankForm extends Component {
  constructor() {
    super();
    
    this.onSubmit = this.onSubmit.bind(this);
  }
  
  onSubmit() {
    console.log(getValue());
  }
  
  render() {
    return (
      <div>
        <button onClick={ this.onSubmit }>Submit</button>
      </div>
    );
  }

...

如何 return 从 getValue 到 onSubmit？

getValue() { ... return refsValue; } -> onSubmit() { console.log(getValue()) }

请更正onSubmit的内容！

抱歉我英语不好

Answer 1

这些看起来像是两个独立的类。它们根本没有链接，因此您将无法获得任何值。

您需要在 BankForm 中重构和呈现 AddForm。我建议将 AddForm 作为无状态组件并通过 getValues（或将 getValues 的内容放在 onSubmit 中）作为 onSubmit 作为道具。

class BankForm extends Component {
   constructor() {
     super();
     this.onSubmit = this.onSubmit.bind(this);
   }

   onSubmit(e) {
     e.preventDefault();
     console.log(e.target.price.value);
   }

   render() {
      return (
        <AddForm onSubmit={this.onSubmit} />
      );
   }
}

function AddForm(props) {
   return (
      <div>
        <form onSubmit={props.onSubmit}>
           <input type="number" name="price" />
           <input type="text" name="remarks" />
           <button type="submit">Submit</button>
        </form>
      </div>
    );
}

https://jsfiddle.net/mb3m0jgd/1/

return 另一个 class 如何在 React redux 中发挥作用

How return another class function in react redux

reactjs

react-redux