javascript - react : generating input field data with a button component

Question

我正在创建一个接收表单，可以将一段数据输入到文本字段中，或者使用字段旁边的按钮随机生成。

我想对表单上的 3 个字段执行此操作，因此我创建了一个组件 叫<RandomDataButton />

我一直困惑于如何确保按钮组件完成的计算结果更新文本框的值，以便表单提交包含生成的数据。

我并不完全理解状态传播，但我所理解的是，流程是单向的，沿着组件的层次结构向下流动。

所以我想做的是选择在文本框中输入一些数据，或者从按钮生成一些随机数据(我想在其他用户界面创建中重用它)

我陷入困境的是如何从层次结构中较低的组件更新输入字段。

我是否将状态传递给随机发生器按钮，然后让它更新状态副本？或者我完全不同意这种方法？

应用程序:

class App extends React.Component {

  render(){
    return (
      <div>
      <DataInputForm />
      </div>
    );
  }
}

数据输入表单:

class DataInputForm extends React.Component{

    state= {
        projectname: '',
        datasource: '',
        data1: '',
        data2: '',
        data3: '',
    };

    handleSubmit = e => {
        e.preventDefault();
        console.log({
            projectname: this.projectname.value,
            datasource: this.datasource.value,
            data1: this.data1.value,
            data2: this.data2.value,
            data3: this.data3.value,
        });
    }

    handleChange = e => this.setState({[e.target.name]: e.target.value});

    render(){
        return(
            <form className="ui form" onSubmit={this.handleSubmit}>
                <div className="field">
                    <label htmlFor="projectname">Project Name: </label>
                    <input 
                        type="text" 
                        id="projectname"
                        name="projectname"
                        placeholder="Project Name"
                        ref={input => this.projectname = input}
                    />
                </div>
                <div className="field"> 
                    <label htmlFor="datasource">Data Source: </label>
                    <input 
                        type="text" 
                        id="datrasource" 
                        name="datasource" 
                        placeholder="Data Source" 
                        ref={input => this.datasource = input}
                    />
                </div>
                <div className="field">
                    <label htmlFor="data1">Data 1: </label>
                    <input 
                        type="number" 
                        min="3"
                        max="18"
                        id="data1"
                        name="data1"
                        ref={input => this.data1 = input}
                    />                  
                    <RandomDataButton buttonid={"data1button"} buttonname={"Data1"} />
                </div>
                <div className="field">
                    <label htmlFor="data2">Data 2: </label>
                    <input 
                        type="number" 
                        min="3"
                        max="18"
                        id="data2"
                        name="data2"
                        ref={input => this.data2 = input}
                    />                  
                    <RandomDataButton buttonid={"data2button"} buttonname={"Data2"} />
                </div>
                <div className="field">
                    <label htmlFor="data3">Data 3: </label>
                    <input 
                        type="number" 
                        min="3"
                        max="18"
                        id="data3"
                        name="data3"
                        ref={input => this.data3 = input}
                    />                  
                    <RandomDataButton buttonid={"data3button"} buttonname={"Data3"} />
                </div>
                    <button className="ui button" type="submit">Create Data</button>
            </form>
        );
    }
}

随机数据按钮:

const getRandom = max => Math.floor(Math.random() * Math.floor(max));

class RandomDataButton extends React.Component {

    generateData(value){
        var result, destination;
        destination = value.toLowerCase();

        result = getRandom(1000);
        console.log("Generated " + result + " for range of " + value + "]: " + destination);
        //this.state.{destination};
    }

    render(){
        return(
            <button id={this.props.buttonid} type="button" onClick={this.generateData.bind(null,this.props.buttonname)}>{this.props.buttonname}</button>
            //<button id="strbutton" type="button">Generate</button>
        );
    }
}

Answer 1

将函数作为 prop 传递给 RandomDataButton。在 DataInputForm 中定义该函数，并在需要更新时通过从 RandomDataButton 调用 prop 函数来更新 DataInputForm 中的状态。