Fatal编程技术网
  • reactjs/
  • Reactjs 如何将'Input'控件中的属性公开给任何其他组件？

Reactjs 如何将'Input'控件中的属性公开给任何其他组件？

reactjs

Reactjs 如何将'Input'控件中的属性公开给任何其他组件？,reactjs,Reactjs,我创建了一个基本的输入，几乎没有效果，但是在基础中创建了一个简单的输入[type='text']。 但是，我无法从我的输入控件中获取值或状态的任何属性。 如何将输入控件中的属性公开给任何其他组件 input.js import React from "react"; class Input extends React.Component { constructor(props) { super(); this.state = { inputValue: "",

我创建了一个基本的
输入
，几乎没有效果，但是在基础中创建了一个简单的
输入[type='text']
。 但是，我无法从我的
输入
控件中获取
值
或
状态
的任何属性。 如何将
输入
控件中的属性公开给任何其他
组件

input.js

import React from "react";

class Input extends React.Component {
  constructor(props) {
    super();
    this.state = {
      inputValue: "",
      fieldActive: false,
      label: props.label,
      placeholder: props.placeholder,
      type: props.type,
      maxLength: props.maxLength,
      error: false,
      required: props.required
    };

    this.updateInputValue = this.updateInputValue.bind(this);
    this.activateField = this.activateField.bind(this);
    this.disableFocus = this.disableFocus.bind(this);
  }

  activateField() {
    this.setState({
      fieldActive: true
    });
  }

  disableFocus(e) {
    if (e.target.value == "") {
      this.setState({
        fieldActive: false
      });

      this.setState({
        error: this.state.required
      });
    } else {
      if (this.state.type == "email") {
        this.setState({
          error: !/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(e.target.value)
        });
      }
    }
  }

  updateInputValue(e) {
    this.setState({
      inputValue: e.target.value
    });
    this.activateField(e);
    e.preventDefault();
  }

  render() {
    return (
      <div className="form-group field-group">
        <label
          htmlFor=""
          className={
            this.state.fieldActive
              ? this.state.error
                ? "field-active form-label floating error"
                : "field-active form-label floating"
              : "form-label floating hide"
          }
        >
          {this.props.label}
        </label>
        <input
          className={
            this.state.error
              ? "form-input floating-label error"
              : "form-input floating-label"
          }
          type={this.props.type}
          placeholder={this.props.placeholder}
          maxLength={this.props.maxLength}
          value={this.state.inputValue}
          name={this.props.id}
          id={this.props.id}
          autoComplete="off"

          onFocus={this.activateField}
          onBlur={this.disableFocus}
          onChange={this.updateInputValue}
        />
      </div>
    );
  }
}

export default Input;

<Input
    label="Firstname"
    placeholder="Firstname"
    id="firstname"
    type="text"
    required='true'
    value=''
    maxLength='20'
    onChange={this.handleChange}
/>
</div>

<Input
    label="Firstname"
    placeholder="Firstname"
    id="firstname"
    type="text"
    required='true'
    value=''
    maxLength='20'
    onChange={this.handleChange}
/>

  handleChange = (id, value) => {
    console.log(id);
    console.log(value);
    console.log('-');
    /*this.setState({
      [e.target.name]: e.target.value
    });*/
  };

class Input extends React.Component {
  constructor(props) {
    super();
    this.state = {
      inputValue: "",
      fieldActive: false,
      label: props.label,
      placeholder: props.placeholder,
      type: props.type,
      maxLength: props.maxLength,
      error: false,
      required: props.required,
      inputChange: props.onChange,
      id: props.id
    };

    console.log(props);

    this.updateInputValue = this.updateInputValue.bind(this);
    this.activateField = this.activateField.bind(this);
    this.disableFocus = this.disableFocus.bind(this);
  }

  activateField() {
    this.setState({
      fieldActive: true
    });
  }

  disableFocus(e) {
    if (e.target.value == "") {
      this.setState({
        fieldActive: false
      });

      this.setState({
        error: this.state.required
      });
    } else {
      if (this.state.type == "email") {
        this.setState({
          error: !/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(e.target.value)
        });
      }
    }
  }

  updateInputValue(e) {
    this.setState({
      inputValue: e.target.value
    });

    if(this.state.inputChange!= undefined && this.state.inputChange != null)
      this.state.inputChange(e.target.id, e.target.value)


    this.activateField(e);
    e.preventDefault();
  }

  render() {
    return (
      <div className="form-group field-group">
        <label
          htmlFor=""
          className={
            this.state.fieldActive
              ? this.state.error
                ? "field-active form-label floating error"
                : "field-active form-label floating"
              : "form-label floating hide"
          }
        >
          {this.props.label}
        </label>
        <input
          className={
            this.state.error
              ? "form-input floating-label error"
              : "form-input floating-label"
          }
          type={this.props.type}
          placeholder={this.props.placeholder}
          maxLength={this.props.maxLength}
          value={this.state.inputValue}
          name={this.props.id}
          id={this.props.id}
          autoComplete="off"

          onFocus={this.activateField}
          onBlur={this.disableFocus}
          onChange={this.updateInputValue}
        />
      </div>
    );
  }
}

export default Input;

从“React”导入React；
类输入扩展了React.Component{
建造师（道具）{
超级（）；
此.state={
输入值：“”，
fieldActive:错误，
标签：props.label，
占位符：props.placeholder，
类型：props.type，
maxLength:props.maxLength，
错误：false，
必选：道具。必选
};
this.updateInputValue=this.updateInputValue.bind（this）；
this.activateField=this.activateField.bind（this）；
this.disableFocus=this.disableFocus.bind（this）；
}
activateField（）{
这是我的国家({
fieldActive:正确
});
}
禁用焦点（e）{
如果（e.target.value==“”）{
这是我的国家({
fieldActive:错误
});
这是我的国家({
错误：this.state.required
});
}否则{
if（this.state.type==“电子邮件”）{
这是我的国家({
错误：！/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\[a-zA-z]+$/.测试（e.目标值）
});
}
}
}
更新输入值（e）{
这是我的国家({
输入值：e.target.value
});
这个。激活场（e）；
e、 预防默认值（）；
}
render（）{
返回(
{this.props.label}
);
}
}
导出默认输入；
MyView.js

import React from "react";

class Input extends React.Component {
  constructor(props) {
    super();
    this.state = {
      inputValue: "",
      fieldActive: false,
      label: props.label,
      placeholder: props.placeholder,
      type: props.type,
      maxLength: props.maxLength,
      error: false,
      required: props.required
    };

    this.updateInputValue = this.updateInputValue.bind(this);
    this.activateField = this.activateField.bind(this);
    this.disableFocus = this.disableFocus.bind(this);
  }

  activateField() {
    this.setState({
      fieldActive: true
    });
  }

  disableFocus(e) {
    if (e.target.value == "") {
      this.setState({
        fieldActive: false
      });

      this.setState({
        error: this.state.required
      });
    } else {
      if (this.state.type == "email") {
        this.setState({
          error: !/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(e.target.value)
        });
      }
    }
  }

  updateInputValue(e) {
    this.setState({
      inputValue: e.target.value
    });
    this.activateField(e);
    e.preventDefault();
  }

  render() {
    return (
      <div className="form-group field-group">
        <label
          htmlFor=""
          className={
            this.state.fieldActive
              ? this.state.error
                ? "field-active form-label floating error"
                : "field-active form-label floating"
              : "form-label floating hide"
          }
        >
          {this.props.label}
        </label>
        <input
          className={
            this.state.error
              ? "form-input floating-label error"
              : "form-input floating-label"
          }
          type={this.props.type}
          placeholder={this.props.placeholder}
          maxLength={this.props.maxLength}
          value={this.state.inputValue}
          name={this.props.id}
          id={this.props.id}
          autoComplete="off"

          onFocus={this.activateField}
          onBlur={this.disableFocus}
          onChange={this.updateInputValue}
        />
      </div>
    );
  }
}

export default Input;

<Input
    label="Firstname"
    placeholder="Firstname"
    id="firstname"
    type="text"
    required='true'
    value=''
    maxLength='20'
    onChange={this.handleChange}
/>
</div>

<Input
    label="Firstname"
    placeholder="Firstname"
    id="firstname"
    type="text"
    required='true'
    value=''
    maxLength='20'
    onChange={this.handleChange}
/>

  handleChange = (id, value) => {
    console.log(id);
    console.log(value);
    console.log('-');
    /*this.setState({
      [e.target.name]: e.target.value
    });*/
  };

class Input extends React.Component {
  constructor(props) {
    super();
    this.state = {
      inputValue: "",
      fieldActive: false,
      label: props.label,
      placeholder: props.placeholder,
      type: props.type,
      maxLength: props.maxLength,
      error: false,
      required: props.required,
      inputChange: props.onChange,
      id: props.id
    };

    console.log(props);

    this.updateInputValue = this.updateInputValue.bind(this);
    this.activateField = this.activateField.bind(this);
    this.disableFocus = this.disableFocus.bind(this);
  }

  activateField() {
    this.setState({
      fieldActive: true
    });
  }

  disableFocus(e) {
    if (e.target.value == "") {
      this.setState({
        fieldActive: false
      });

      this.setState({
        error: this.state.required
      });
    } else {
      if (this.state.type == "email") {
        this.setState({
          error: !/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(e.target.value)
        });
      }
    }
  }

  updateInputValue(e) {
    this.setState({
      inputValue: e.target.value
    });

    if(this.state.inputChange!= undefined && this.state.inputChange != null)
      this.state.inputChange(e.target.id, e.target.value)


    this.activateField(e);
    e.preventDefault();
  }

  render() {
    return (
      <div className="form-group field-group">
        <label
          htmlFor=""
          className={
            this.state.fieldActive
              ? this.state.error
                ? "field-active form-label floating error"
                : "field-active form-label floating"
              : "form-label floating hide"
          }
        >
          {this.props.label}
        </label>
        <input
          className={
            this.state.error
              ? "form-input floating-label error"
              : "form-input floating-label"
          }
          type={this.props.type}
          placeholder={this.props.placeholder}
          maxLength={this.props.maxLength}
          value={this.state.inputValue}
          name={this.props.id}
          id={this.props.id}
          autoComplete="off"

          onFocus={this.activateField}
          onBlur={this.disableFocus}
          onChange={this.updateInputValue}
        />
      </div>
    );
  }
}

export default Input;
只能将其值传递给父组件或子组件。因此，如果您想与组件Y共享组件X的某些状态，那么Y应该是X的祖先，或者是X的子级，或者是X的祖先的子级

父组件可以从
ref
或回调中获取子组件的值：

  • 备选案文1。将一些
    ref='myinput'
    添加到
    Input
    ，然后通过父组件中的
    this.refs.myinput.value
    访问它
  • 备选案文2。向父方法添加一些
    grabChildValue
    函数，然后添加
    this.props.grabChildValue（this.value）
    调用input的
    onChange
只能对其父组件或子组件执行此操作。对于其他人来说，你无法做到这一点

对于父组件，如MyView，请检查以下问题：其中大多数都有易于理解的解决方案

或者，您可以检查其他答案

对于父母对孩子来说，这很容易。只需插入
input={this.state.x}
，其中x是您要公开的属性，然后您可以使用
this.props.input
访问它。我找到了一种方法，不确定它是否更好，但它正在工作。
基本上，您可以在组件构造函数中传递函数a并将其作为
props
接收。
并将组件中的view函数用作回调函数

view.js


import React from "react";

class Input extends React.Component {
  constructor(props) {
    super();
    this.state = {
      inputValue: "",
      fieldActive: false,
      label: props.label,
      placeholder: props.placeholder,
      type: props.type,
      maxLength: props.maxLength,
      error: false,
      required: props.required
    };

    this.updateInputValue = this.updateInputValue.bind(this);
    this.activateField = this.activateField.bind(this);
    this.disableFocus = this.disableFocus.bind(this);
  }

  activateField() {
    this.setState({
      fieldActive: true
    });
  }

  disableFocus(e) {
    if (e.target.value == "") {
      this.setState({
        fieldActive: false
      });

      this.setState({
        error: this.state.required
      });
    } else {
      if (this.state.type == "email") {
        this.setState({
          error: !/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(e.target.value)
        });
      }
    }
  }

  updateInputValue(e) {
    this.setState({
      inputValue: e.target.value
    });
    this.activateField(e);
    e.preventDefault();
  }

  render() {
    return (
      <div className="form-group field-group">
        <label
          htmlFor=""
          className={
            this.state.fieldActive
              ? this.state.error
                ? "field-active form-label floating error"
                : "field-active form-label floating"
              : "form-label floating hide"
          }
        >
          {this.props.label}
        </label>
        <input
          className={
            this.state.error
              ? "form-input floating-label error"
              : "form-input floating-label"
          }
          type={this.props.type}
          placeholder={this.props.placeholder}
          maxLength={this.props.maxLength}
          value={this.state.inputValue}
          name={this.props.id}
          id={this.props.id}
          autoComplete="off"

          onFocus={this.activateField}
          onBlur={this.disableFocus}
          onChange={this.updateInputValue}
        />
      </div>
    );
  }
}

export default Input;



<Input
    label="Firstname"
    placeholder="Firstname"
    id="firstname"
    type="text"
    required='true'
    value=''
    maxLength='20'
    onChange={this.handleChange}
/>
</div>



<Input
    label="Firstname"
    placeholder="Firstname"
    id="firstname"
    type="text"
    required='true'
    value=''
    maxLength='20'
    onChange={this.handleChange}
/>

  handleChange = (id, value) => {
    console.log(id);
    console.log(value);
    console.log('-');
    /*this.setState({
      [e.target.name]: e.target.value
    });*/
  };



class Input extends React.Component {
  constructor(props) {
    super();
    this.state = {
      inputValue: "",
      fieldActive: false,
      label: props.label,
      placeholder: props.placeholder,
      type: props.type,
      maxLength: props.maxLength,
      error: false,
      required: props.required,
      inputChange: props.onChange,
      id: props.id
    };

    console.log(props);

    this.updateInputValue = this.updateInputValue.bind(this);
    this.activateField = this.activateField.bind(this);
    this.disableFocus = this.disableFocus.bind(this);
  }

  activateField() {
    this.setState({
      fieldActive: true
    });
  }

  disableFocus(e) {
    if (e.target.value == "") {
      this.setState({
        fieldActive: false
      });

      this.setState({
        error: this.state.required
      });
    } else {
      if (this.state.type == "email") {
        this.setState({
          error: !/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(e.target.value)
        });
      }
    }
  }

  updateInputValue(e) {
    this.setState({
      inputValue: e.target.value
    });

    if(this.state.inputChange!= undefined && this.state.inputChange != null)
      this.state.inputChange(e.target.id, e.target.value)


    this.activateField(e);
    e.preventDefault();
  }

  render() {
    return (
      <div className="form-group field-group">
        <label
          htmlFor=""
          className={
            this.state.fieldActive
              ? this.state.error
                ? "field-active form-label floating error"
                : "field-active form-label floating"
              : "form-label floating hide"
          }
        >
          {this.props.label}
        </label>
        <input
          className={
            this.state.error
              ? "form-input floating-label error"
              : "form-input floating-label"
          }
          type={this.props.type}
          placeholder={this.props.placeholder}
          maxLength={this.props.maxLength}
          value={this.state.inputValue}
          name={this.props.id}
          id={this.props.id}
          autoComplete="off"

          onFocus={this.activateField}
          onBlur={this.disableFocus}
          onChange={this.updateInputValue}
        />
      </div>
    );
  }
}

export default Input;




handleChange=（id，值）=>{
console.log（id）；
console.log（值）；
console.log（'-'）；
/*这是我的国家({
[e.target.name]：e.target.value
});*/
};


Input.js


import React from "react";

class Input extends React.Component {
  constructor(props) {
    super();
    this.state = {
      inputValue: "",
      fieldActive: false,
      label: props.label,
      placeholder: props.placeholder,
      type: props.type,
      maxLength: props.maxLength,
      error: false,
      required: props.required
    };

    this.updateInputValue = this.updateInputValue.bind(this);
    this.activateField = this.activateField.bind(this);
    this.disableFocus = this.disableFocus.bind(this);
  }

  activateField() {
    this.setState({
      fieldActive: true
    });
  }

  disableFocus(e) {
    if (e.target.value == "") {
      this.setState({
        fieldActive: false
      });

      this.setState({
        error: this.state.required
      });
    } else {
      if (this.state.type == "email") {
        this.setState({
          error: !/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(e.target.value)
        });
      }
    }
  }

  updateInputValue(e) {
    this.setState({
      inputValue: e.target.value
    });
    this.activateField(e);
    e.preventDefault();
  }

  render() {
    return (
      <div className="form-group field-group">
        <label
          htmlFor=""
          className={
            this.state.fieldActive
              ? this.state.error
                ? "field-active form-label floating error"
                : "field-active form-label floating"
              : "form-label floating hide"
          }
        >
          {this.props.label}
        </label>
        <input
          className={
            this.state.error
              ? "form-input floating-label error"
              : "form-input floating-label"
          }
          type={this.props.type}
          placeholder={this.props.placeholder}
          maxLength={this.props.maxLength}
          value={this.state.inputValue}
          name={this.props.id}
          id={this.props.id}
          autoComplete="off"

          onFocus={this.activateField}
          onBlur={this.disableFocus}
          onChange={this.updateInputValue}
        />
      </div>
    );
  }
}

export default Input;



<Input
    label="Firstname"
    placeholder="Firstname"
    id="firstname"
    type="text"
    required='true'
    value=''
    maxLength='20'
    onChange={this.handleChange}
/>
</div>



<Input
    label="Firstname"
    placeholder="Firstname"
    id="firstname"
    type="text"
    required='true'
    value=''
    maxLength='20'
    onChange={this.handleChange}
/>

  handleChange = (id, value) => {
    console.log(id);
    console.log(value);
    console.log('-');
    /*this.setState({
      [e.target.name]: e.target.value
    });*/
  };



class Input extends React.Component {
  constructor(props) {
    super();
    this.state = {
      inputValue: "",
      fieldActive: false,
      label: props.label,
      placeholder: props.placeholder,
      type: props.type,
      maxLength: props.maxLength,
      error: false,
      required: props.required,
      inputChange: props.onChange,
      id: props.id
    };

    console.log(props);

    this.updateInputValue = this.updateInputValue.bind(this);
    this.activateField = this.activateField.bind(this);
    this.disableFocus = this.disableFocus.bind(this);
  }

  activateField() {
    this.setState({
      fieldActive: true
    });
  }

  disableFocus(e) {
    if (e.target.value == "") {
      this.setState({
        fieldActive: false
      });

      this.setState({
        error: this.state.required
      });
    } else {
      if (this.state.type == "email") {
        this.setState({
          error: !/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(e.target.value)
        });
      }
    }
  }

  updateInputValue(e) {
    this.setState({
      inputValue: e.target.value
    });

    if(this.state.inputChange!= undefined && this.state.inputChange != null)
      this.state.inputChange(e.target.id, e.target.value)


    this.activateField(e);
    e.preventDefault();
  }

  render() {
    return (
      <div className="form-group field-group">
        <label
          htmlFor=""
          className={
            this.state.fieldActive
              ? this.state.error
                ? "field-active form-label floating error"
                : "field-active form-label floating"
              : "form-label floating hide"
          }
        >
          {this.props.label}
        </label>
        <input
          className={
            this.state.error
              ? "form-input floating-label error"
              : "form-input floating-label"
          }
          type={this.props.type}
          placeholder={this.props.placeholder}
          maxLength={this.props.maxLength}
          value={this.state.inputValue}
          name={this.props.id}
          id={this.props.id}
          autoComplete="off"

          onFocus={this.activateField}
          onBlur={this.disableFocus}
          onChange={this.updateInputValue}
        />
      </div>
    );
  }
}

export default Input;



类输入扩展了React.Component{
建造师（道具）{
超级（）；
此.state={
输入值：“”，
fieldActive:错误，
标签：props.label，
占位符：props.placeholder，
类型：props.type，
maxLength:props.maxLength，
错误：false，
必选：道具。必选，
inputChange:props.onChange，
id:props.id
};
控制台日志（道具）；
this.updateInputValue=this.updateInputValue.bind（this）；
this.activateField=this.activateField.bind（this）；
this.disableFocus=this.disableFocus.bind（this）；
}
activateField（）{
这是我的国家({
fieldActive:正确
});
}
禁用焦点（e）{
如果（e.target.value==“”）{
这是我的国家({
fieldActive:错误
});
这是我的国家({
错误：this.state.required
});
}否则{
if（this.state.type==“电子邮件”）{
这是我的国家({
错误：！/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\[a-zA-z]+$/.测试（e.目标值）
});
}
}
}
更新输入值（e）{
这是我的国家({
输入值：e.target.value
});
if（this.state.inputChange！=undefined&&this.state.inputChange！=null）
this.state.inputChange（e.target.id，e.target.value）
这个。激活场（e）；
e、 预防默认值（）；
}
render（）{
返回(
{this.props.label}
);
}
}
导出默认输入；

您可以接受最能回答问题的答案。请解释它的实际作用。我想说，这是我链接到的问题的一个答案的副本。