Question

我正在尝试创建一个处理我的编辑框的组件。我做的一件事就是传递一个名为required的道具：

<div className="col">
      <EditBox labelText="Firstname" data={this.state.firstname} onChange={this.handleFirstnameChange} required={true} />
</div>

（有没有办法发送'required'而不是'required = {true}'？）

我的组件然后检查此值，并且onKeyUp验证用户输入的数据。（不确定如何设置初始状态......）。我使用onChange，但是它被分配给我的回调，因为它更新了状态。

import React, {Component} from 'react';

export default class Editbox extends Component {

    constructor(props) {
        super(props);

        this.validation = this.validation.bind(this);

        var style = {
            "border-color": "red"
        }

    }



    validation(e)
    {
        if(this.props.required===true && !!!e.target.value)
        {
            console.log("Box is invalid!");
            return;
        }

        console.log("Box is valid");

    }

    render() {
        return (
            <div className="top-buffer">
                <div className="row">
                    <div className="col-xs-12">
                        <span>{this.props.labelText}</span>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-12">
                        <input type="text" className="form-control" value={this.props.data} onKeyUp={this.validation} onChange={this.props.onChange} />
                    </div>
                </div>
            </div>
        )
    }
}

我如何应用样式，或在进行验证时删除样式？我有一个验证功能，我创建了样式，但我需要申请。现在，我只是控制台记录。

Answer 1

您的EditBox组件可以在其状态下拥有有效密钥，这样您就可以跟踪输入是否有效

class EditBox extends React.Component {
  state = {
    valid : false
  }

  validate = (e) => {
    const { required } = this.props;
    const { value } = e.target; 
    if (required && value.length === 0) {
      this.setState({ valid : false });
    } else {
      this.setState({ valid : true })
    }
  }

  render () {
    const { label, required, name, data, onChange } = this.props;
    const { valid } = this.state;
    return (
      <div style={{border : `1px solid ${valid ? 'black' : 'red'}`}}>
        <label>
           {required && '*'}
           {label}
        </label>
        <input 
          type="text" 
          name={name}
          value={data}
          onKeyUp={this.validate}
          onChange={onChange} 
        />
      </div>
    )
  }
}

和demo

将样式应用于React中的控件

1 个答案: