提交关于道具价值改变的表格

Question

I am new to React and trying to modify this application: https://github.com/nice-table/bitmex-scaled-orders

My goal is, say the prop "instrumentData" found in "src/modules/orders/OrderForm.js" has "instrumentData.lastprice" value changing to a specific value in real-time in the backend. I want to submit the form on that page if the value reaches a specific value. In other words, I want to keep monitoring that prop untill it hits a number and it will submit the form upon that. Is that doable through states? I tried to research it but given I am new to React I am a bit lost as to what code to use and where exactly to add it.

Thanks.

Answer 1

Autosubmitting is simple

It's simple to run some action on data change. React components are data driven - autoupdating. You can just insert a function 'into data flow'.

Your data source is in DataContext then you should use <DataContext.Consumer /> to get data 'stream' - stream because it's frequently updated using socket connection.

<DataContext.Consumer>
  { (data, submitForm, isSubmitting) => {

    console.log("context data", data );
    // extract data from `data` object
    // const someData = data.someProperty;
    // if( someData > 12345 ) {
    //   if( !isSubmitting ) {
    //     submitForm() 
    //   }
    //   return "Limit reached"
    // }
    // return null

  }}
</ DataContext.Consumer>

This snippet can be placed almost anywhere after this code:

  render={({
    values,
    errors,
    touched,
    setFieldValue,
    submitForm,
    isSubmitting,
    isValid,
    validateForm
  }) => (
    <React.Fragment>
       // place it here

... and of course before end of this fragment ( </ React.Fragment> ).

You can pass and use almost all functions defined in this component (file), fe setFieldValue("priceUpper", to update form value before submitting.

Autosubmitting is NOT so simple

Problem is not trivial. You should create a component with internal logic to:

• set limit (render input, onChange handler, useState) instead of hardcoded value
• block(or not? checkbox?) autosubmitting in a loop (formik will submit but later it will clear isSubmitting flag - our component will autosubmit again)
• render context consumer inside - optimize rerenderings
• etc.

Good luck ;)

Answer 2

React has a really good write up on forms and handling onChange() which is an event that can fire when a field is changed https://reactjs.org/docs/forms.html .

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  submit = () => {
      // submit form
      // eg axios.post(URL, {
      //   value: this.state.value
      // })
  }

  handleChange(event) {
    this.setState({value: event.target.value});
    if (this.state.value == 10) {
       this.submit()
    }
  }

    return (
      <form>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
      </form>
    );
  }
}

I see the github repo is using hooks in lieu of component classes.
You can read about hooks here https://reactjs.org/docs/hooks-intro.html . onChange can still call handle change and instead of this.state you may be using useState