如何將onChange傳遞給無狀態組件

Question

我一直在使用reactjs，構建一些基本形式都很好，但是當我嘗試分解成較小的組件時，它變得復雜了，我有一個簡單的組件，其中有一個名為XMLParser的表單，並且內部有2個較小的組件稱為XMLInput和XMLResult。

XMLResult非常直接，它只是將值傳遞給props，但是無法弄清楚使用XMLInput的最佳方法是什么，我無法使綁定與子組件一起使用，感謝任何指針。

function EppResult(props) {
    const resultXML = props.xmlData;
 return <div style={styles.child}>
        <textarea style={styles.outputBox} name="resultXML" value={resultXML} readOnly/>
    </div>;

}

class EppInput extends Component{

  render(){
  return <textarea
    style={styles.inputBox}
    placeholder="Enter XML here!"
    name="xmlData"
    value={this.props.value}
    onChange={this.props.handleInputChange}
  />;
}
}


    class XMLParser extends Component {
        constructor(props) {
            super(props);

        this.state = {xmlData : ""};
        this.state = {resultXML : ""};
            this.handleInputChange = this.handleInputChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }

handleSubmit(event) {
    console.log("do submit");
}

        handleInputChange(event) {
            const target = event.target;
            const value = target.type === "checkbox" ? target.checked : target.value;
            const name = target.name;
            this.setState({
                [name]: value
            });
        }

render() {
        return (
            <div style={styles.container}>
                <form onSubmit={this.handleSubmit}>
                    <div style={styles.container}>
                        <div style={styles.child}>
                        <XMLInput value={this.state.xmlData} onChange={this.handleInputChange} />
                        </div>
                        <div style={styles.child}>
                            <div style={styles.formContainer}>

                                <button style={styles.formElement}>Run!</button>
                            </div>
                        </div>
            <XMLResult xmlData={this.state.resultXML}/>
                    </div>
                </form>
            </div>
        );
    }
}

Answer 1

我看到許多問題：

• EppInput是子組件名稱，但XMLInput用於主要組件
• 您傳遞了onChange this.props.handleInputChange ，但將其稱為this.props.handleInputChange應該是this.props.onChange
• 請注意-我不知道樣式對象在哪里，但我將假定它可用於所有組件

我尚未對此進行測試，但這是一個基本的清理工作，並作了一些改動以查看其他處理方式：

// stateless functional component 
const XMLResult = ({ xmlData }) => (
  <div style={styles.child}>
    <textarea
      style={styles.outputBox}
      name="resultXML"
      value={xmlData}
      readOnly
    />
  </div>
);

// stateless functional component
// props are passed directly to the child element using the spread operator 
const XMLInput = (props) => (
  <textarea
    {...props}
    style={styles.inputBox}
    placeholder="Enter XML here!"
    name="xmlData"
  />
);

class XMLParser extends Component {
  constructor(props) {
    super(props);
    this.state = { xmlData: "", resultXML: "" };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    console.log("do submit");
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <div style={styles.container}>
        <form onSubmit={this.handleSubmit}>
          <div style={styles.container}>
            <div style={styles.child}>
              <XMLInput
                value={this.state.xmlData}
                onChange={this.handleInputChange}
              />
            </div>
            <div style={styles.child}>
              <div style={styles.formContainer}>
                <button style={styles.formElement}>Run!</button>
              </div>
            </div>
            <XMLResult xmlData={this.state.resultXML} />
          </div>
        </form>
      </div>
    );
  }
}