Question

我一直在玩reactjs，并且构建一些基本形式都很好但是当我试图打破较小的组件时它变得复杂我有一个简单的组件，其中有一个名为XMLParser的表单，它有2个较小的组件，名为XMLInput和XMLResult。

XMLResult非常直接它只是将值传递给道具，但无法弄清楚使用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.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>
    );
  }
}

如何将onChange传递给无状态组件

1 个答案: