How to call a nested React component function?

Question

JavaScript

I am just starting to learn React.JS. The problem is that my nested component's function is not being called. Attached to the block "kpparser"
Here is the code of my dialog component

class SomeDialog extends React.Component {
    render() {
        return <div id="dialog" className="mdl-dialog mdl-cell mdl-cell--6-col">
                  <h1 className="mdl-dialog__title">Добавить фильм</h1>
                  <div className="mdl-dialog__content">
                         <div className="mdl-layout__content">
                            <div className="mdl-tabs mdl-js-tabs">
                               <div className="mdl-tabs__tab-bar">
                                  <a href="#kpparser" className="mdl-tabs__tab is-active">KPParser</a>
                                  <a href="#manual" className="mdl-tabs__tab">Ручной ввод</a>
                               </div>
                               <div className="mdl-tabs__panel is-active" id="kpparser">
                                  <ParseForm postUrl="/redactortools/parse" />
                               </div>
                               <div className="mdl-tabs__panel" id="manual">
                                  <div id="manual-input"></div>
                               </div>
                            </div>
                         </div>
                  </div>
                  <div class="mdl-dialog__actions">
                    <button type="button" className="mdl-button">Close</button>
                    <button type="button" className="mdl-button" disabled>Disabled action</button>
                  </div>
              </div>
  }
  };

And here is the code of my form component

class ParseForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { url: ''};
        this.handleUrlChange = this.handleUrlChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleUrlChange(e) {
        this.setState({ url: e.target.value });
    }
    handleSubmit(e) {
        const url = this.state.url.trim();
        this.state ={url:url}
        var data = new FormData();
        data.append('url',url)
        if (!url) {
            return;
        }
        var xhr = new XMLHttpRequest();
        xhr.open('post', this.props.postUrl, true);
        xhr.onload = function (event) {
            var json = xhr.responseText;
        }
        xhr.send(url);
    }
    render() {
        return (
                <div>
                    <form className="commentForm" onSubmit={this.handleSubmit}>   
                        <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input type="text"
                                   id="url"
                                   className="mdl-textfield__input"
                                   value={this.state.url}
                                   onChange={this.handleUrlChange} />
                            <label className="mdl-textfield__label" for="url">Адресс</label>
                        </div>
                        <input type="submit" className="mdl-button" value="Парсинг" />
                    </form>
                </div>
               );   
             }
}

Please help. Thank you.

Answer 1

1. Your code is invalid. The keywords class and for are reserved by the language.
Use className and htmlFor instead .
2. So the state cannot be updated. 3. Create FormDatra but don't use it. After correcting these points, if it doesn’t start, look at the errors in the console, look at the network tab, you can debug the method itself with the same console.log output. this.state ={url:url}