ReactJS: How to define a required textfield

This entry is part 29 of 35 in the series React JS

See the Pen React – Textfield by daryl (@darylw) on CodePen.

class Textfield extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {value: this.props.value};
  }
 	
  render() {
    const {
			label,
			mandatory=false,
			readOnly=false,
			errorMessage=''} = this.props;
		
		return (
      <div>
				<Label>{label}</Label>
        <input className="textInput" value={this.state.value} type="text" onChange={this.handleChange} readOnly={readOnly} />
       	{this.state.value == '' && mandatory ?
					<ErrorMessage>{errorMessage}</ErrorMessage>
				: null
				}
      </div>
    )
  }
  
  handleChange(e) {
		this.setState({value: e.target.value});
	}
}

const Label = ({children}) => (
	<label className="formLabel">{children}</label>
)

const ErrorMessage = ({children}) => (
	<span className="errorMessage">{children}</span>
)

var formDefinition = {
	formName: "My Form",
	formVersion: "1.0",
	formItems: [
		{
			mandatory: true,
			errorMessage: "Your name is required",
			label: "What is your name?"
		},
		{
			mandatory: true,
			errorMessage: "Your age is required",
			label: "What is your age?"
		}
	]
}

class Form extends React.Component {
	constructor(props) {
		super(props);
	}
	
	render() {
		let formItems = [];
		this.props.formDef.formItems.forEach((formItem) => {
			formItems.push(<Textfield mandatory={formItem.mandatory} errorMessage={formItem.errorMessage} label={formItem.label}/>)
		});
		
		return (
			<div>
				{formItems}
			</div>
		)
	}
}

ReactDOM.render(
	<div>
		<Form formDef={formDefinition}/>
	</div>
	, document.getElementById('root'));

ReactJS: TextField

This entry is part 23 of 35 in the series React JS

See the Pen React – TextField by daryl (@darylw) on CodePen.0

class MyApp extends React.Component {
  render() {
    return (
      <TextField 
        placeholder="Enter your name"
      />
    );
  }
};

class TextField extends React.Component {
  constructor (props) {
    super(props);
  }
  
  render () {
    return (
      <input
        onChange={this.handleKeyPress}
        type="text"
        placeholder={ this.props.placeholder } 
        value=""
      />
    );
  }
};

React.render(<MyApp/>, document.querySelector('#myapp'));

JavaFX: Entering text using TextField

This entry is part 27 of 55 in the series JavaFX

TextField is probably the most common control among all the UI input Elements.  TextField is for user to input a single line of text.

By now, it should be rather easy for us to display the TextField in the scene.

To get the input string into a string variable, it is equally easy.  As in the example below, we use the getText() method as below.

package enteringtext;

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.geometry.*;

public class EnteringText extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    Label lbl = new Label("Entered Text Will Show Here");

    TextField txtField;

    @Override
    public void start(Stage stage) {

        lbl.setMinWidth(100);
        lbl.setAlignment(Pos.BOTTOM_LEFT);

        Label lblEnter = new Label("Enter Text:");
        lblEnter.setMinWidth(100);
        lblEnter.setAlignment(Pos.BOTTOM_RIGHT);

        txtField = new TextField();

        Button btnOK = new Button("OK");
        btnOK.setMinWidth(75);
        btnOK.setOnAction(e -> buttonOK());

        HBox paneLabel = new HBox(20, lbl);

        paneLabel.setPadding(new Insets(50));

        HBox paneField = new HBox(20, lblEnter, txtField);
        paneField.setPadding(new Insets(10));

        HBox paneButton = new HBox(20, btnOK);
        paneButton.setPadding(new Insets(10));
        paneButton.setAlignment(Pos.BOTTOM_RIGHT);

        VBox pane = new VBox(10, paneLabel, paneField, paneButton);

        Scene scene = new Scene(pane);
        stage.setScene(scene);
        stage.setTitle("Enter A Text");
        stage.show();
    }

    public void buttonOK() {

        String message;

        message = txtField.getText();

        lbl.setText(message);

    }
}

textField